<!DOCTYPE html><html lang="en"><head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="CR" name="w3c-status">
  <title>HTML 5.1: 4.3. Sections</title>
  <link href="styles/styles-html.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href=styles.default.css>
  <meta content="Bikeshed 1.0.0" name="generator">

  <link href="styles/W3C-CR" rel="stylesheet" type="text/css">
 </head>
 <body class="h-entry">
  <div class="head">
   <header>
    <p data-fill-with="logo"><a href="http://www.w3.org/"><img alt="W3C" height="48" src="styles/logos/W3C" width="72"></a></p>
    <h1 class="p-name no-ref allcaps" id="title">HTML 5.1</h1>
    <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Candidate Recommendation, <time class="dt-updated" datetime="2016-06-21">21 June 2016</time></span></h2>
   </header>
   
   
   
   
  </div>
  
  
  
  
  
  <nav data-fill-with="table-of-contents" id="toc"><p class="prev_next">← <a href="document-metadata.html#document-metadata"><span class="secno">4.2</span> <span class="content">Document metadata</span></a> — <a href="index.html#contents">Table of contents</a> — <a href="grouping-content.html#grouping-content"><span class="secno">4.4</span> <span class="content">Grouping content</span></a> →</p>
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory"><li>
       <a href="sections.html#sections"><span class="secno">4.3</span> <span class="content">Sections</span></a>
       <ol class="toc">
        <li><a href="sections.html#the-body-element"><span class="secno">4.3.1</span> <span class="content">The <span><code>body</code></span> element</span></a>
        </li><li><a href="sections.html#the-article-element"><span class="secno">4.3.2</span> <span class="content">The <span><code>article</code></span> element</span></a>
        </li><li><a href="sections.html#the-section-element"><span class="secno">4.3.3</span> <span class="content">The <span><code>section</code></span> element</span></a>
        </li><li><a href="sections.html#the-nav-element"><span class="secno">4.3.4</span> <span class="content">The <span><code>nav</code></span> element</span></a>
        </li><li><a href="sections.html#the-aside-element"><span class="secno">4.3.5</span> <span class="content">The <span><code>aside</code></span> element</span></a>
        </li><li><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements"><span class="secno">4.3.6</span> <span class="content"> The <span><code>h1</code></span>, <span><code>h2</code></span>, <span><code>h3</code></span>, <span><code>h4</code></span>, <span><code>h5</code></span>, and <span><code>h6</code></span> elements </span></a>
        </li><li><a href="sections.html#the-header-element"><span class="secno">4.3.7</span> <span class="content">The <span><code>header</code></span> element</span></a>
        </li><li><a href="sections.html#the-footer-element"><span class="secno">4.3.8</span> <span class="content">The <span><code>footer</code></span> element</span></a>
        </li><li><a href="sections.html#the-address-element"><span class="secno">4.3.9</span> <span class="content">The <span><code>address</code></span> element</span></a>
        </li><li>
         <a href="sections.html#headings-and-sections"><span class="secno">4.3.10</span> <span class="content">Headings and sections</span></a>
         <ol class="toc">
          <li><a href="sections.html#creating-an-outline"><span class="secno">4.3.10.1</span> <span class="content">Creating an outline</span></a>
         </li></ol>
        </li><li>
         <a href="sections.html#sections-usage-summary"><span class="secno">4.3.11</span> <span class="content">Usage summary</span></a>
         <ol class="toc">
          <li><a href="sections.html#article-or-section"><span class="secno">4.3.11.1</span> <span class="content">Article or section?</span></a>
         </li></ol>
       </li></ol>
      </li></ol>
  </nav><main><section>
     <h3 class="heading settled" data-level="4.3" id="sections"><span class="secno">4.3. </span><span class="content">Sections</span><a class="self-link" href="sections.html#sections"></a></h3>
     <h4 class="heading settled" data-level="4.3.1" id="the-body-element"><span class="secno">4.3.1. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-body"><code>body</code></dfn> element</span><a class="self-link" href="sections.html#the-body-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-9">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-2">Sectioning root</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-8">Contexts in which this element can be used</a>:
      </dt><dd>As the second element in an <code><a data-link-type="element" href="semantics.html#elementdef-html" id="ref-for-elementdef-html-22">html</a></code> element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-11">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-9">Flow content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-8">Tag omission in text/html</a>:
      </dt><dd> A <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-21">body</a></code> element’s <a data-link-type="dfn" href="syntax.html#start-tag" id="ref-for-start-tag-5">start tag</a> may be omitted if the element is empty, or if
      the first thing inside the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-22">body</a></code> element is not a <a data-link-type="dfn" href="infrastructure.html#space-characters" id="ref-for-space-characters-35">space character</a> or a <a data-link-type="dfn" href="syntax.html#comment" id="ref-for-comment-4">comment</a>, except if the first thing inside the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-23">body</a></code> element is a <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-49">meta</a></code>, <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-28">link</a></code>, <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-18">script</a></code>, <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-26">style</a></code>, or <code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-6">template</a></code> element.
      </dd><dd> A <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-24">body</a></code> element’s <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-8">end tag</a> may be omitted if the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-25">body</a></code> element
      is not immediately followed by a <a data-link-type="dfn" href="syntax.html#comment" id="ref-for-comment-5">comment</a>. 
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-9">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-8">Global attributes</a>
      </dd><dd><code>onafterprint</code>
      </dd><dd><code>onbeforeprint</code>
      </dd><dd><code>onbeforeunload</code>
      </dd><dd><code>onhashchange</code>
      </dd><dd><code>onlanguagechange</code>
      </dd><dd><code>onmessage</code>
      </dd><dd><code>onoffline</code>
      </dd><dd><code>ononline</code>
      </dd><dd><code>onpagehide</code>
      </dd><dd><code>onpageshow</code>
      </dd><dd><code>onpopstate</code>
      </dd><dd><code>onrejectionhandled</code>
      </dd><dd><code>onstorage</code>
      </dd><dd><code>onunhandledrejection</code>
      </dd><dd><code>onunload</code>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd> <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#document"><code>document</code></a> role (default - <a data-link-type="dfn" href="dom.html#do-not-set" id="ref-for-do-not-set-2"><em>do not set</em></a>), <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#application"><code>application</code></a>. 
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-10">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-8">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLBodyElement" data-dfn-type="interface" data-export="" id="htmlbodyelement-htmlbodyelement">HTMLBodyElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-18">HTMLElement</a> {
};
<a class="n" data-link-type="idl-name" href="sections.html#htmlbodyelement-htmlbodyelement" id="ref-for-htmlbodyelement-htmlbodyelement-1">HTMLBodyElement</a> <span class="kt">implements</span> <a class="n" data-link-type="idl-name" href="webappapis.html#windoweventhandlers-windoweventhandlers" id="ref-for-windoweventhandlers-windoweventhandlers-1">WindowEventHandlers</a>;
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-26">body</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-10">represents</a> the content of the document.</p>
     <p>In <a data-link-type="dfn" href="infrastructure.html#conforming-document" id="ref-for-conforming-document-9">conforming documents</a>, there is only one <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-27">body</a></code> element. The <code>document.body</code> IDL attribute provides scripts with easy access to a document’s <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-28">body</a></code> element.</p>
     <p class="note" role="note"> Some DOM operations (for example, parts of the <a href="editing.html#drag-and-drop">drag and drop</a> model) are defined in terms
    of "<a href="sections.html#the-body-element">the <code>body</code> element</a>". This refers to a particular element in the DOM, as per the
    definition of the term, and not any arbitrary <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-29">body</a></code> element. </p>
     <p>The <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-30">body</a></code> element exposes as <a data-link-type="dfn" href="webappapis.html#event-handler-content-event-handler-content-attribute" id="ref-for-event-handler-content-event-handler-content-attribute-4">event handler content attributes</a> a number of the <a data-link-type="dfn" href="webappapis.html#event-handler" id="ref-for-event-handler-2">event handlers</a> of the <code>Window</code> object. It also mirrors their <a data-link-type="dfn" href="webappapis.html#event-handler-idl-event-handler-idl-attribute" id="ref-for-event-handler-idl-event-handler-idl-attribute-1">event handler IDL attributes</a>.</p>
     <p>The <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <a class="idl-code" data-link-type="attribute" href="webappapis.html#dom-globaleventhandlers-onload" id="ref-for-dom-globaleventhandlers-onload-3"><code>onload</code></a>, <code>onresize</code>, and <code>onscroll</code> <a data-link-type="dfn" href="webappapis.html#event-handler" id="ref-for-event-handler-3">event handlers</a> of the <code>Window</code> object, exposed on the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-31">body</a></code> element, replace the generic <a data-link-type="dfn" href="webappapis.html#event-handler" id="ref-for-event-handler-4">event handlers</a> with
  the same names normally supported by <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-47">html elements</a>.</p>
     <p class="example" id="example-dbf8b198"><a class="self-link" href="sections.html#example-dbf8b198"></a> Thus, for example, a bubbling <code>error</code> event dispatched on a child of <a href="sections.html#the-body-element">the <code>body</code> element</a> of a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> would first trigger the <code>onerror</code> <a data-link-type="dfn" href="webappapis.html#event-handler-content-event-handler-content-attribute" id="ref-for-event-handler-content-event-handler-content-attribute-5">event handler content attributes</a> of that element, then that of the root <code>html</code> element, and only <em>then</em> would it trigger the <code>onerror</code> <a data-link-type="dfn" href="webappapis.html#event-handler-content-event-handler-content-attribute" id="ref-for-event-handler-content-event-handler-content-attribute-6">event handler
    content attribute</a> on the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-32">body</a></code> element. This is because the event would bubble
    from the target, to the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-33">body</a></code>, to the <code><a data-link-type="element" href="semantics.html#elementdef-html" id="ref-for-elementdef-html-23">html</a></code>, to the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>, to the <code class="idl"><a data-link-type="idl" href="browsers.html#window-window" id="ref-for-window-window-6">Window</a></code>, and the <a data-link-type="dfn" href="webappapis.html#event-handler" id="ref-for-event-handler-5">event handler</a> on the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-34">body</a></code> is watching the <code>Window</code> not the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-35">body</a></code>. A regular event
    listener attached to the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-36">body</a></code> using <code>addEventListener()</code>, however, would
    be run when the event bubbled through the <code>body</code> and not when it reaches the <code>Window</code> object. </p>
     <div class="example" id="example-91d58dcd">
      <a class="self-link" href="sections.html#example-91d58dcd"></a> This page updates an indicator to show whether or not the user is online: 
<pre class="highlight"><span class="cp">&lt;!DOCTYPE HTML&gt;</span>
<span class="nt">&lt;html&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Online or offline?<span class="nt">&lt;/title&gt;</span>
    <span class="nt">&lt;script&gt;</span>
      <span class="kd">function</span> <span class="nx">update</span><span class="p">(</span><span class="nx">online</span><span class="p">)</span> <span class="p">{</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'status'</span><span class="p">).</span><span class="nx">textContent</span> <span class="o">=</span>
        <span class="nx">online</span> <span class="o">?</span> <span class="s1">'Online'</span> <span class="o">:</span> <span class="s1">'Offline'</span><span class="p">;</span>
      <span class="p">}</span>
    <span class="nt">&lt;/script&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body</span> <span class="na">ononline=</span><span class="s">"update(true)"</span>
    <span class="na">onoffline=</span><span class="s">"update(false)"</span>
    <span class="na">onload=</span><span class="s">"update(navigator.onLine)"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>You are: <span class="nt">&lt;span</span> <span class="na">id=</span><span class="s">"status"</span><span class="nt">&gt;</span>(Unknown)<span class="nt">&lt;/span&gt;&lt;/p&gt;</span>
  <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.3.2" id="the-article-element"><span class="secno">4.3.2. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-article"><code>article</code></dfn> element</span><a class="self-link" href="sections.html#the-article-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-10">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-10">Flow content</a>, but with no <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-4">main</a></code> element descendants.
      </dd><dd><a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-4">Sectioning content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-2">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-9">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-11">flow content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-12">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-12">Flow content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-9">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-10">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-9">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd> <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#article"><code>article</code></a> (default - <a data-link-type="dfn" href="dom.html#do-not-set" id="ref-for-do-not-set-3"><em>do not set</em></a>), <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#application"><code>application</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#document"><code>document</code></a> or <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#main"><code>main</code></a>. 
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-11">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-9">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-19">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-4">article</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-11">represents</a> a complete, or self-contained, composition in a document,
  page, application, or site. This could be a magazine, newspaper, technical or
  scholarly article, an essay or report, a blog or other social media post.</p>
     <p>A general rule is that the <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-5">article</a></code> element is appropriate only if the element’s
  contents would be listed explicitly in the document’s outline. Each <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-6">article</a></code> should be
  identified, typically by including a heading(<code><a data-link-type="element" href="sections.html#elementdef-h1" id="ref-for-elementdef-h1-8">h1</a></code>-<code><a data-link-type="element" href="sections.html#elementdef-h6" id="ref-for-elementdef-h6-4">h6</a></code> element) as a child of the <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-7">article</a></code> element.</p>
     <p>Assistive Technology may convey the semantics of the <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-8">article</a></code> to users. This
  information can provide a hint to users as to the type of content. For example the <code>role</code> of
  the element, which in this case matches the element name "article", can be announced by
  screen reader software when a user navigates to an <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-9">article</a></code> element. User Agents
  may also provide methods to navigate to <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-10">article</a></code> elements.</p>
     <p>When <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-11">article</a></code> elements are nested, the inner <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-12">article</a></code> elements represent
  articles that are in principle related to the contents of the outer article. For instance, a blog
  entry on a site could consist of summaries of other blog entries in <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-13">article</a></code> elements nested
  within the <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-14">article</a></code> element for the blog entry.</p>
     <p>Author information associated with an <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-15">article</a></code> element (q.v. the <code>address</code> element) does not apply to nested <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-16">article</a></code> elements.</p>
     <div class="example" id="example-f99f39f2">
      <a class="self-link" href="sections.html#example-f99f39f2"></a> 
      <p>The following is an example of a blog post extract, marked up using the <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-17">article</a></code> element:</p>
<pre class="highlight"><span class="nt">&lt;article&gt;</span>
 <span class="nt">&lt;header&gt;</span>
  <span class="nt">&lt;h2&gt;&lt;a</span> <span class="na">href=</span><span class="s">"https://herbert.io"</span><span class="nt">&gt;</span>Short note on wearing shorts<span class="nt">&lt;/a&gt;&lt;/h2&gt;</span>
   <span class="nt">&lt;p&gt;</span>Posted on Wednesday, 10 February 2016 by Patrick Lauke.
   <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://herbert.io/short-note/#comments"</span><span class="nt">&gt;</span>6 comments<span class="nt">&lt;/a&gt;&lt;/p&gt;</span>
 <span class="nt">&lt;/header&gt;</span>
 <span class="nt">&lt;p&gt;</span>A fellow traveller posed an interesting question: Why do you wear shorts rather than
 longs? The person was wearing <em>culottes</em> as the time, so I considered the question equivocal in nature,
 but I attempted to provide an honest answer despite the dubiousness of the questioner’s dress.<span class="nt">&lt;/p&gt;</span>
 <span class="nt">&lt;p&gt;</span>The short answer is that I enjoy wearing shorts, the long answer is...<span class="nt">&lt;/p&gt;</span>
 <span class="nt">&lt;p&gt;&lt;a</span> <span class="na">href=</span><span class="s">"https://herbert.io/short-note/"</span><span class="nt">&gt;</span>Continue reading: Short note on
 wearing shorts<span class="nt">&lt;/a&gt;&lt;/p&gt;</span>
<span class="nt">&lt;/article&gt;</span></pre>
     </div>
     <p class="note" role="note">The schema.org  vocabulary can be used to provide more granular information about
  the type of article, using the <a href="https://schema.org/Article">CreativeWork - Article</a> subtypes, other information such as the publication date for the article can also be provided.</p>
     <div class="example" id="example-6ebc24c8">
      <a class="self-link" href="sections.html#example-6ebc24c8"></a> 
      <p>This example shows a blog post using the <code>article</code> element, with some schema.org
  annotations: </p>
<pre class="highlight"><span class="nt">&lt;article</span> <span class="na">itemscope</span> <mark><span class="na">itemtype=</span><span class="s">"https://schema.org/BlogPosting"</span></mark><span class="nt">&gt;</span>
  <span class="nt">&lt;header&gt;</span>
    <span class="nt">&lt;h2</span> <span class="na">itemprop=</span><span class="s">"headline"</span><span class="nt">&gt;</span>The Very First Rule of Life<span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;p&gt;&lt;time</span> <mark><span class="na">itemprop=</span><span class="s">"datePublished"</span></mark> <span class="na">datetime=</span><span class="s">"2016-02-28"</span><span class="nt">&gt;</span>3 days ago<span class="nt">&lt;/time&gt;&lt;/p&gt;</span>
  <span class="nt">&lt;/header&gt;</span>
  <span class="nt">&lt;p&gt;</span>If there’s a microphone anywhere near you, assume it’s hot and
  sending whatever you’re saying to the world. Seriously.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;p&gt;</span><em>...</em><span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;footer&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">itemprop=</span><span class="s">"discussionUrl"</span> <span class="na">href=</span><span class="s">"?comments=1"</span><span class="nt">&gt;</span>Show comments...<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/footer&gt;</span>
<span class="nt">&lt;/article&gt;</span>
</pre>
      <p>Here is that same blog post, but showing some of the comments: </p>
<pre class="highlight">     <span class="nt">&lt;article</span> <span class="na">itemscope</span> <span class="na">itemtype=</span><span class="s">"https://schema.org/BlogPosting"</span><span class="nt">&gt;</span>  <span class="nt">&lt;header&gt;</span>
    <span class="nt">&lt;h2</span> <span class="na">itemprop=</span><span class="s">"headline"</span><span class="nt">&gt;</span>The Very First Rule of Life<span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;p&gt;&lt;time</span> <span class="na">itemprop=</span><span class="s">"datePublished"</span> <span class="na">datetime=</span><span class="s">"2009-10-09"</span><span class="nt">&gt;</span>3 days ago<span class="nt">&lt;/time&gt;&lt;/p&gt;</span>
  <span class="nt">&lt;/header&gt;</span>
   <span class="nt">&lt;p&gt;</span>If there’s a microphone anywhere near you, assume it’s hot and
   sending whatever you’re saying to the world. Seriously.<span class="nt">&lt;/p&gt;</span>
   <span class="nt">&lt;p&gt;</span><em>...</em><span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;section&gt;</span>
    <span class="nt">&lt;h3&gt;</span>Comments<span class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;ol&gt;</span>
     <span class="nt">&lt;li</span> <span class="na">itemprop=</span><span class="s">"comment"</span> <span class="na">itemscope</span> <span class="na">itemtype=</span><span class="s">"https://schema.org/UserComments"</span> <span class="na">id=</span><span class="s">"c1"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;p&gt;</span>Posted by: <span class="nt">&lt;span</span> <span class="na">itemprop=</span><span class="s">"creator"</span> <span class="na">itemscope</span> <span class="na">itemtype=</span><span class="s">"https://schema.org/Person"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">itemprop=</span><span class="s">"name"</span><span class="nt">&gt;</span>George Washington<span class="nt">&lt;/span&gt;</span>
        <span class="nt">&lt;/span&gt;&lt;/p&gt;</span>
        <span class="nt">&lt;p&gt;&lt;time</span> <span class="na">itemprop=</span><span class="s">"commentTime"</span> <span class="na">datetime=</span><span class="s">"2009-10-10"</span><span class="nt">&gt;</span>15 minutes ago<span class="nt">&lt;/time&gt;&lt;/p&gt;</span>
        <span class="nt">&lt;p&gt;</span>Yeah! Especially when talking about your lobbyist friends!<span class="nt">&lt;/p&gt;</span>
     <span class="nt">&lt;li</span> <span class="na">itemprop=</span><span class="s">"comment"</span> <span class="na">itemscope</span> <span class="na">itemtype=</span><span class="s">"https://schema.org/UserComments"</span> <span class="na">id=</span><span class="s">"c2"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;p&gt;</span>Posted by: <span class="nt">&lt;span</span> <span class="na">itemprop=</span><span class="s">"creator"</span> <span class="na">itemscope</span> <span class="na">itemtype=</span><span class="s">"https://schema.org/Person"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">itemprop=</span><span class="s">"name"</span><span class="nt">&gt;</span>George Hammond<span class="nt">&lt;/span&gt;</span>
        <span class="nt">&lt;/span&gt;&lt;/p&gt;</span>
        <span class="nt">&lt;p&gt;&lt;time</span> <span class="na">itemprop=</span><span class="s">"commentTime"</span> <span class="na">datetime=</span><span class="s">"2009-10-10"</span><span class="nt">&gt;</span>5 minutes ago<span class="nt">&lt;/time&gt;&lt;/p&gt;</span>
        <span class="nt">&lt;p&gt;</span>Hey, you have the same first name as me.<span class="nt">&lt;/p&gt;</span>
     <span class="nt">&lt;/li&gt;</span>
   <span class="nt">&lt;/ol&gt;</span>
  <span class="nt">&lt;/section&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</pre>
      <p>Notice the use of an ordered list <code>ol</code> to organize the comments. Also note the
  comments are a subsection of the article, identified using a <code>section</code> element.</p>
     </div>
     <h4 class="heading settled" data-level="4.3.3" id="the-section-element"><span class="secno">4.3.3. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-section"><code>section</code></dfn> element</span><a class="self-link" href="sections.html#the-section-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-11">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-13">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-5">Sectioning content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-3">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-10">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-14">flow content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-13">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-15">Flow content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-10">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-11">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-10">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd> <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#region"><code>region</code></a> role (default - <a data-link-type="dfn" href="dom.html#do-not-set" id="ref-for-do-not-set-4"><em>do not set</em></a>), <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#alert"><code>alert</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#alertdialog"><code>alertdialog</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#application"><code>application</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#contentinfo"><code>contentinfo</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#dialog"><code>dialog</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#document"><code>document</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#log"><code>log</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#main"><code>main</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#marquee"><code>marquee</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#presentation"><code>presentation</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#search"><code>search</code></a> or <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#status"><code>status</code></a>. 
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-12">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-10">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-20">HTMLElement</a></code>.
     </dd></dl>
     <p>The <a data-link-type="element" href="sections.html#elementdef-section" id="ref-for-elementdef-section-5">section</a> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-12">represents</a> a generic section of a document or application.
  A section, in this context, is a thematic grouping of content. Each <code>section</code> should be
  identified, typically by including a heading (<code>h1</code>-<code>h6</code> element) as a child
  of the <a data-link-type="element" href="sections.html#elementdef-section" id="ref-for-elementdef-section-6">section</a> element.</p>
     <p class="example" id="example-1a704a1d"><a class="self-link" href="sections.html#example-1a704a1d"></a> Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the
    numbered sections of a thesis. A Web site’s home page could be split into sections for an
    introduction, news items, and contact information. </p>
     <p class="note" role="note"> Authors are encouraged to use the <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-18">article</a></code> element instead of the <code><a data-link-type="element" href="sections.html#elementdef-section" id="ref-for-elementdef-section-7">section</a></code> element when the content is complete, or self-contained, composition. </p>
     <p class="note" role="note"> The <code><a data-link-type="element" href="sections.html#elementdef-section" id="ref-for-elementdef-section-8">section</a></code> element is not a generic container element. When an element is needed
    only for styling purposes or as a convenience for scripting, authors are encouraged to use the <code><a data-link-type="element" href="grouping-content.html#elementdef-div" id="ref-for-elementdef-div-11">div</a></code> element instead. A general rule is that the <code><a data-link-type="element" href="sections.html#elementdef-section" id="ref-for-elementdef-section-9">section</a></code> element is
    appropriate only if the element’s contents would be listed explicitly in the document’s <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-4">outline</a>. </p>
     <p>Assistive Technology may convey the semantics of the <code><a data-link-type="element" href="sections.html#elementdef-section" id="ref-for-elementdef-section-10">section</a></code> to users when
  the element has an explicit label. This information can provide a hint to users as to the type of content.
  For example the <code>role</code> of the element, which in this case is "region",
  can be announced by screen reader software when a user navigates to an <code><a data-link-type="element" href="sections.html#elementdef-section" id="ref-for-elementdef-section-11">section</a></code> element. User Agents
  may also provide methods to navigate to <code><a data-link-type="element" href="sections.html#elementdef-section" id="ref-for-elementdef-section-12">section</a></code> elements.</p>
     <div class="example" id="example-64114b74">
      <a class="self-link" href="sections.html#example-64114b74"></a> In the following example, we see an article (part of a larger Web page) about apples,
    containing two short sections. 
      <p class="note" role="note">The <code><a data-link-type="element" href="sections.html#elementdef-section" id="ref-for-elementdef-section-13">section</a></code> has an <code>aria-label</code> attribute providing a brief description of
  the contents. Assistive technology may convey the <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#region"><code>region</code></a> role
  along with the <code>aria-label</code> value as a hint to users.</p>
<pre class="highlight"><span class="nt">&lt;article&gt;</span>
  <span class="nt">&lt;header&gt;</span>
    <span class="nt">&lt;h2&gt;</span>Apples<span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;p&gt;</span>Tasty, delicious fruit!<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/header&gt;</span>
  <span class="nt">&lt;p&gt;</span>The apple is the pomaceous fruit of the apple tree.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;section</span> <span class="na">aria-label=</span><span class="s">"Red apples."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h3&gt;</span>Red Delicious<span class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;p&gt;</span>These bright red apples are the most common found in many
    supermarkets.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/section&gt;</span>
  <span class="nt">&lt;section</span> <span class="na">aria-label=</span><span class="s">"Green apples."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h3&gt;</span>Granny Smith<span class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;p&gt;</span>These juicy, green apples make a great filling for
    apple pies.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/section&gt;</span>
<span class="nt">&lt;/article&gt;</span>
</pre>
     </div>
     <div class="example" id="example-d9eb8cef">
      <a class="self-link" href="sections.html#example-d9eb8cef"></a> Here is a graduation program with two sections, one for the list of people graduating, and
    one for the description of the ceremony. (The markup in this example features an uncommon style
    sometimes used to minimize the amount of <a data-link-type="dfn" href="dom.html#inter-element-whitespace" id="ref-for-inter-element-whitespace-10">inter-element whitespace</a>.) 
<pre class="highlight"><span class="cp">&lt;!DOCTYPE Html&gt;</span>
<span class="nt">&lt;html</span>
  <span class="nt">&gt;&lt;head</span>
    <span class="nt">&gt;&lt;title</span>
      <span class="nt">&gt;</span>Graduation Ceremony Summer 2022<span class="nt">&lt;/title</span>
<span class="nt">    &gt;&lt;/head</span>
<span class="nt">  &gt;&lt;body</span>
    <span class="nt">&gt;&lt;h1</span>
      <span class="nt">&gt;</span>Graduation<span class="nt">&lt;/h1</span>
<span class="nt">    &gt;&lt;section</span>
      <span class="nt">&gt;&lt;h2</span>
        <span class="nt">&gt;</span>Ceremony<span class="nt">&lt;/h2</span>
<span class="nt">      &gt;&lt;p</span>
        <span class="nt">&gt;</span>Opening Procession<span class="nt">&lt;/p</span>
<span class="nt">      &gt;&lt;p</span>
        <span class="nt">&gt;</span>Speech by Validactorian<span class="nt">&lt;/p</span>
<span class="nt">      &gt;&lt;p</span>
        <span class="nt">&gt;</span>Speech by Class President<span class="nt">&lt;/p</span>
<span class="nt">      &gt;&lt;p</span>
        <span class="nt">&gt;</span>Presentation of Diplomas<span class="nt">&lt;/p</span>
<span class="nt">      &gt;&lt;p</span>
        <span class="nt">&gt;</span>Closing Speech by Headmaster<span class="nt">&lt;/p</span>
<span class="nt">    &gt;&lt;/section</span>
<span class="nt">    &gt;&lt;section</span>
      <span class="nt">&gt;&lt;h2</span>
        <span class="nt">&gt;</span>Graduates<span class="nt">&lt;/h2</span>
<span class="nt">      &gt;&lt;ul</span>
        <span class="nt">&gt;&lt;li</span>
          <span class="nt">&gt;</span>Molly Carpenter<span class="nt">&lt;/li</span>
<span class="nt">        &gt;&lt;li</span>
          <span class="nt">&gt;</span>Anastasia Luccio<span class="nt">&lt;/li</span>
<span class="nt">        &gt;&lt;li</span>
          <span class="nt">&gt;</span>Ebenezar McCoy<span class="nt">&lt;/li</span>
<span class="nt">        &gt;&lt;li</span>
          <span class="nt">&gt;</span>Karrin Murphy<span class="nt">&lt;/li</span>
<span class="nt">        &gt;&lt;li</span>
          <span class="nt">&gt;</span>Thomas Raith<span class="nt">&lt;/li</span>
<span class="nt">        &gt;&lt;li</span>
          <span class="nt">&gt;</span>Susan Rodriguez<span class="nt">&lt;/li</span>
<span class="nt">      &gt;&lt;/ul</span>
<span class="nt">    &gt;&lt;/section</span>
<span class="nt">  &gt;&lt;/body</span>
<span class="nt">&gt;&lt;/html&gt;</span>
</pre>
     </div>
     <div class="example" id="example-7d21c8c9">
      <a class="self-link" href="sections.html#example-7d21c8c9"></a> In this example, a book author has marked up some sections as chapters and some as appendices,
    and uses CSS to style the headers in these two classes of section differently. The whole book is
    wrapped in an <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-19">article</a></code> element as part of an even larger document containing other
    books. 
<pre class="highlight"><span class="nt">&lt;style&gt;</span>
  <span class="nt">section</span> <span class="p">{</span> <span class="k">border</span><span class="o">:</span> <span class="k">double</span> <span class="k">medium</span><span class="p">;</span> <span class="k">margin</span><span class="o">:</span> <span class="m">2em</span><span class="p">;</span> <span class="p">}</span>
  <span class="nt">section</span><span class="nc">.chapter</span> <span class="nt">h3</span> <span class="p">{</span> <span class="k">font</span><span class="o">:</span> <span class="m">2em</span> <span class="n">Roboto</span><span class="o">,</span> <span class="n">Helvetica</span> <span class="n">Neue</span><span class="o">,</span> <span class="k">sans-serif</span><span class="p">;</span> <span class="p">}</span>
  <span class="nt">section</span><span class="nc">.appendix</span> <span class="nt">h3</span> <span class="p">{</span> <span class="k">font</span><span class="o">:</span> <span class="k">small-caps</span> <span class="m">2em</span> <span class="n">Roboto</span><span class="o">,</span> <span class="n">Helvetica</span> <span class="n">Neue</span><span class="o">,</span> <span class="k">sans-serif</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
...
<span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"book"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;header&gt;</span>
    <span class="nt">&lt;h2&gt;</span>My Book<span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;p&gt;</span>A sample with not much content<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;p&gt;&lt;small&gt;</span>Published by Dummy Publicorp Ltd.<span class="nt">&lt;/small&gt;&lt;/p&gt;</span>
  <span class="nt">&lt;/header&gt;</span>

  <span class="nt">&lt;section</span> <span class="na">class=</span><span class="s">"chapter"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h3&gt;</span>My First Chapter<span class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;p&gt;</span>This is the first of my chapters. It doesn’t say much.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;p&gt;</span>But it has two paragraphs!<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/section&gt;</span>
  <span class="nt">&lt;section</span> <span class="na">class=</span><span class="s">"chapter"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h3&gt;</span>It Continues: The Second Chapter<span class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;p&gt;</span>Bla dee bla, dee bla dee bla. Boom.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/section&gt;</span>
  <span class="nt">&lt;section</span> <span class="na">class=</span><span class="s">"chapter"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h3&gt;</span>Chapter Three: A Further Example<span class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;p&gt;</span>It’s not like a battle between brightness and earthtones would go
    unnoticed.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;p&gt;</span>But it might ruin my story.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/section&gt;</span>
  <span class="nt">&lt;section</span> <span class="na">class=</span><span class="s">"appendix"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h3&gt;</span>Appendix A: Overview of Examples<span class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;p&gt;</span>These are demonstrations.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/section&gt;</span>
  <span class="nt">&lt;section</span> <span class="na">class=</span><span class="s">"appendix"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h3&gt;</span>Appendix B: Some Closing Remarks<span class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;p&gt;</span>Hopefully this long example shows that you <span class="nt">&lt;em&gt;</span>can<span class="nt">&lt;/em&gt;</span> style
    sections, so long as they are used to indicate actual sections.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/section&gt;</span>
<span class="nt">&lt;/article&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.3.4" id="the-nav-element"><span class="secno">4.3.4. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-nav"><code>nav</code></dfn> element</span><a class="self-link" href="sections.html#the-nav-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-12">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-16">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-6">Sectioning content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-4">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-11">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-17">flow content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-14">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-18">Flow content</a>, but with no <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-5">main</a></code> element descendants.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-11">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-12">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-11">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd> <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#navigation"><code>navigation</code></a> role (default - <a data-link-type="dfn" href="dom.html#do-not-set" id="ref-for-do-not-set-5"><em>do not set</em></a>) or <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#presentation"><code>presentation</code></a>. 
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-13">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-11">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-21">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="sections.html#elementdef-nav" id="ref-for-elementdef-nav-4">nav</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-13">represents</a> a section of a page that links to other pages or to
  parts within the page: a section with navigation links.</p>
     <p>Assistive Technology may convey the semantics of the <code><a data-link-type="element" href="sections.html#elementdef-nav" id="ref-for-elementdef-nav-5">nav</a></code> to users.
   This information can provide a hint to users as to the type of content.  For example the <code>role</code> of the element, which in this case is "navigation", can be announced by screen reader software when a
   user navigates to an <code><a data-link-type="element" href="sections.html#elementdef-nav" id="ref-for-elementdef-nav-6">nav</a></code> element. User Agents may also provide methods to navigate to <code><a data-link-type="element" href="sections.html#elementdef-nav" id="ref-for-elementdef-nav-7">nav</a></code> elements.</p>
     <p class="note" role="note"> In cases where the content of a <code><a data-link-type="element" href="sections.html#elementdef-nav" id="ref-for-elementdef-nav-8">nav</a></code> element represents a list of items, use list
    markup to aid understanding and navigation. </p>
     <p class="note" role="note"> Not all groups of links on a page need to be in a <code><a data-link-type="element" href="sections.html#elementdef-nav" id="ref-for-elementdef-nav-9">nav</a></code> element — the element is
    primarily intended for sections that consist of major navigation blocks. In particular, it is
    common for footers to have a short list of links to various pages of a site, such as the terms
    of service, the home page, and a copyright page. The <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-4">footer</a></code> element alone is
    sufficient for such cases; while a <code><a data-link-type="element" href="sections.html#elementdef-nav" id="ref-for-elementdef-nav-10">nav</a></code> element can be used in such cases, it is
    usually unnecessary. </p>
     <p class="note" role="note"> User agents (such as screen readers) that are targeted at users who can benefit from navigation
    information being omitted in the initial rendering, or who can benefit from navigation
    information being immediately available, can use this element as a way to determine what content
    on the page to initially skip or provide on request (or both). </p>
     <div class="example" id="example-1bd7d3ce">
      <a class="self-link" href="sections.html#example-1bd7d3ce"></a> In the following example, there are two <code><a data-link-type="element" href="sections.html#elementdef-nav" id="ref-for-elementdef-nav-11">nav</a></code> elements, one for primary navigation
    around the site, and one for secondary navigation around the page itself. 
<pre class="highlight"><span class="nt">&lt;body&gt;</span>
  <span class="nt">&lt;h1&gt;</span>The Wiki Center Of Exampland<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;nav&gt;</span>
    <span class="nt">&lt;ul&gt;</span>
      <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
      <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/events"</span><span class="nt">&gt;</span>Current Events<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
      <em>...more...</em>
    <span class="nt">&lt;/ul&gt;</span>
  <span class="nt">&lt;/nav&gt;</span>
  <span class="nt">&lt;article&gt;</span>
    <span class="nt">&lt;header&gt;</span>
      <span class="nt">&lt;h2&gt;</span>Demos in Exampland<span class="nt">&lt;/h2&gt;</span>
      <span class="nt">&lt;p&gt;</span>Written by A. N. Other.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/header&gt;</span>
    <span class="nt">&lt;nav&gt;</span>
      <span class="nt">&lt;ul&gt;</span>
        <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#public"</span><span class="nt">&gt;</span>Public demonstrations<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#destroy"</span><span class="nt">&gt;</span>Demolitions<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <em>...more...</em>
      <span class="nt">&lt;/ul&gt;</span>
    <span class="nt">&lt;/nav&gt;</span>
    <span class="nt">&lt;div&gt;</span>
      <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"public"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Public demonstrations<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;p&gt;</span><em>...more...</em><span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;/section&gt;</span>
      <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"destroy"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Demolitions<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;p&gt;</span><em>...more...</em><span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;/section&gt;</span>
      <em>...more...</em>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;footer&gt;</span>
      <span class="nt">&lt;p&gt;&lt;a</span> <span class="na">href=</span><span class="s">"?edit"</span><span class="nt">&gt;</span>Edit<span class="nt">&lt;/a&gt;</span> | <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"?delete"</span><span class="nt">&gt;</span>Delete<span class="nt">&lt;/a&gt;</span> | <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"?Rename"</span><span class="nt">&gt;</span>Rename<span class="nt">&lt;/a&gt;&lt;/p&gt;</span>
    <span class="nt">&lt;/footer&gt;</span>
  <span class="nt">&lt;/article&gt;</span>
  <span class="nt">&lt;footer&gt;</span>
    <span class="nt">&lt;p&gt;&lt;small&gt;</span>© copyright 1998 Exampland Emperor<span class="nt">&lt;/small&gt;&lt;/p&gt;</span>
  <span class="nt">&lt;/footer&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</pre>
     </div>
     <div class="example" id="example-94937bc0">
      <a class="self-link" href="sections.html#example-94937bc0"></a> In the following example, the page has several places where links are present, but only one of
    those places is considered a navigation section. 
<pre class="highlight"><span class="nt">&lt;body</span> <span class="na">typeof=</span><span class="s">"schema:Blog"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;header&gt;</span>
    <span class="nt">&lt;h1&gt;</span>Wake up sheeple!<span class="nt">&lt;/h1&gt;</span>
    <span class="nt">&lt;p&gt;&lt;a</span> <span class="na">href=</span><span class="s">"news.html"</span><span class="nt">&gt;</span>News<span class="nt">&lt;/a&gt;</span> -
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"blog.html"</span><span class="nt">&gt;</span>Blog<span class="nt">&lt;/a&gt;</span> -
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"forums.html"</span><span class="nt">&gt;</span>Forums<span class="nt">&lt;/a&gt;&lt;/p&gt;</span>
    <span class="nt">&lt;p&gt;</span>Last Modified: <span class="nt">&lt;span</span> <span class="na">property=</span><span class="s">"schema:dateModified"</span><span class="nt">&gt;</span>2009-04-01<span class="nt">&lt;/span&gt;&lt;/p&gt;</span>
    <span class="nt">&lt;nav&gt;</span>
      <span class="nt">&lt;h2&gt;</span>Navigation<span class="nt">&lt;/h2&gt;</span>
      <span class="nt">&lt;ul&gt;</span>
        <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"articles.html"</span><span class="nt">&gt;</span>Index of all articles<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"today.html"</span><span class="nt">&gt;</span>Things sheeple need to wake up for today<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"successes.html"</span><span class="nt">&gt;</span>Sheeple we have managed to wake<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
      <span class="nt">&lt;/ul&gt;</span>
    <span class="nt">&lt;/nav&gt;</span>
  <span class="nt">&lt;/header&gt;</span>
  <span class="nt">&lt;main&gt;</span>
    <span class="nt">&lt;article</span> <span class="na">property=</span><span class="s">"schema:blogPosts"</span> <span class="na">typeof=</span><span class="s">"schema:BlogPosting"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;header&gt;</span>
        <span class="nt">&lt;h2</span> <span class="na">property=</span><span class="s">"schema:headline"</span><span class="nt">&gt;</span>My Day at the Beach<span class="nt">&lt;/h2&gt;</span>
      <span class="nt">&lt;/header&gt;</span>
      <span class="nt">&lt;main</span> <span class="na">property=</span><span class="s">"schema:articleBody"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;p&gt;</span>Today I went to the beach and had a lot of fun.<span class="nt">&lt;/p&gt;</span>
        <em>...more content...</em>
      <span class="nt">&lt;/main&gt;</span>
      <span class="nt">&lt;footer&gt;</span>
        <span class="nt">&lt;p&gt;</span>Posted <span class="nt">&lt;time</span> <span class="na">property=</span><span class="s">"schema:datePublished"</span> <span class="na">datetime=</span><span class="s">"2009-10-10"</span><span class="nt">&gt;</span>Thursday<span class="nt">&lt;/time&gt;</span>.<span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;/footer&gt;</span>
    <span class="nt">&lt;/article&gt;</span>
    <em>...more blog posts...</em>
  <span class="nt">&lt;/main&gt;</span>
  <span class="nt">&lt;footer&gt;</span>
    <span class="nt">&lt;p&gt;</span>Copyright ©
      <span class="nt">&lt;span</span> <span class="na">property=</span><span class="s">"schema:copyrightYear"</span><span class="nt">&gt;</span>2010<span class="nt">&lt;/span&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">property=</span><span class="s">"schema:copyrightHolder"</span><span class="nt">&gt;</span>The Example Company<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;p&gt;&lt;a</span> <span class="na">href=</span><span class="s">"about.html"</span><span class="nt">&gt;</span>About<span class="nt">&lt;/a&gt;</span> -
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"policy.html"</span><span class="nt">&gt;</span>Privacy Policy<span class="nt">&lt;/a&gt;</span> -
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"contact.html"</span><span class="nt">&gt;</span>Contact Us<span class="nt">&lt;/a&gt;&lt;/p&gt;</span>
  <span class="nt">&lt;/footer&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</pre>
      <p>Notice the <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-6">main</a></code> element being used to wrap the main content of the page. In this
    case, all content other than the page header and footer.</p>
      <p>You can also see microdata annotations in the above example that use the schema.org vocabulary
    to provide the publication date and other metadata about the blog post.</p>
     </div>
     <div class="example" id="example-84241bb3">
      <a class="self-link" href="sections.html#example-84241bb3"></a> A <code><a data-link-type="element" href="sections.html#elementdef-nav" id="ref-for-elementdef-nav-12">nav</a></code> element doesn’t have to contain a list, it can contain other kinds of content
    as well. In this navigation block, links are provided in prose: 
<pre class="highlight"><span class="nt">&lt;nav&gt;</span>
  <span class="nt">&lt;h2&gt;</span>Navigation<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;p&gt;</span>You are on my home page. To the north lies <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/blog"</span><span class="nt">&gt;</span>my
  blog<span class="nt">&lt;/a&gt;</span>, from whence the sounds of battle can be heard. To the east
  you can see a large mountain, upon which many <span class="nt">&lt;a</span>
  <span class="na">href=</span><span class="s">"/school"</span><span class="nt">&gt;</span>school papers<span class="nt">&lt;/a&gt;</span> are littered. Far up thus mountain
  you can spy a little figure who appears to be me, desperately
  scribbling a <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/school/thesis"</span><span class="nt">&gt;</span>thesis<span class="nt">&lt;/a&gt;</span>.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;p&gt;</span>To the west are several exits. One fun-looking exit is labeled <span class="nt">&lt;a</span>
  <span class="na">href=</span><span class="s">"https://games.example.com/"</span><span class="nt">&gt;</span>"games"<span class="nt">&lt;/a&gt;</span>. Another more
  boring-looking exit is labeled <span class="nt">&lt;a</span>
  <span class="na">href=</span><span class="s">"https://isp.example.net/"</span><span class="nt">&gt;</span>ISP™<span class="nt">&lt;/a&gt;</span>.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;p&gt;</span>To the south lies a dark and dank <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/about"</span><span class="nt">&gt;</span>contacts
  page<span class="nt">&lt;/a&gt;</span>. Cobwebs cover its disused entrance, and at one point you
  see a rat run quickly out of the page.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
</pre>
     </div>
     <div class="example" id="example-a9b1e533">
      <a class="self-link" href="sections.html#example-a9b1e533"></a> In this example, <code><a data-link-type="element" href="sections.html#elementdef-nav" id="ref-for-elementdef-nav-13">nav</a></code> is used in an e-mail application, to let the user switch
    folders: 
<pre class="highlight"><span class="nt">&lt;p&gt;&lt;input</span> <span class="na">type=</span><span class="s">button</span> <span class="na">value=</span><span class="s">"Compose"</span> <span class="na">onclick=</span><span class="s">"compose()"</span><span class="nt">&gt;&lt;/p&gt;</span>
<span class="nt">&lt;nav&gt;</span>
  <span class="nt">&lt;h2&gt;</span>Folders<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;ul&gt;</span>
    <span class="nt">&lt;li&gt;</span> <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/inbox"</span> <span class="na">onclick=</span><span class="s">"return openFolder(this.href)"</span><span class="nt">&gt;</span>Inbox<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">count</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;li&gt;</span> <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/sent"</span> <span class="na">onclick=</span><span class="s">"return openFolder(this.href)"</span><span class="nt">&gt;</span>Sent<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;li&gt;</span> <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/drafts"</span> <span class="na">onclick=</span><span class="s">"return openFolder(this.href)"</span><span class="nt">&gt;</span>Drafts<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;li&gt;</span> <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/trash"</span> <span class="na">onclick=</span><span class="s">"return openFolder(this.href)"</span><span class="nt">&gt;</span>Trash<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;li&gt;</span> <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/customers"</span> <span class="na">onclick=</span><span class="s">"return openFolder(this.href)"</span><span class="nt">&gt;</span>Customers<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.3.5" id="the-aside-element"><span class="secno">4.3.5. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-aside"><code>aside</code></dfn> element</span><a class="self-link" href="sections.html#the-aside-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-13">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-19">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-7">Sectioning content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-5">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-12">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-20">flow content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-15">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-21">Flow content</a>, but with no <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-7">main</a></code> element descendants.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-12">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-13">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-12">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd> <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#complementary"><code>complementary</code></a> role (default - <a data-link-type="dfn" href="dom.html#do-not-set" id="ref-for-do-not-set-6"><em>do not set</em></a>), <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#note"><code>note</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#search"><code>search</code></a> or <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#presentation"><code>presentation</code></a>. 
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-14">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-12">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-22">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-4">aside</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-14">represents</a> a section of a page that consists of content that
  is tangentially related to the content of the parenting <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-8">sectioning content</a>, and which
  could be considered separate from that content. Such sections are often represented as sidebars
  in printed typography.</p>
     <p>The element can be used for typographical effects like pull quotes or sidebars, for advertising,
  for groups of <code><a data-link-type="element" href="sections.html#elementdef-nav" id="ref-for-elementdef-nav-14">nav</a></code> elements, and for other content that is considered separate from
  the main content of the nearest ancestor <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-9">sectioning content</a>.</p>
     <p>Assistive Technology may convey the semantics of the <code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-5">aside</a></code> to users. This
   information can provide a hint to users as to the type of content. For example the <code>role</code> of
   the element, which in this case is "complementary", can be announced by screen reader software when a user
   navigates to an <code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-6">aside</a></code> element. User Agents may also provide methods to navigate to <code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-7">aside</a></code> elements.</p>
     <p class="note" role="note"> It’s not appropriate to use the <code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-8">aside</a></code> element just for parentheticals, since those
    are part of the main flow of the document. </p>
     <div class="example" id="example-01abc109">
      <a class="self-link" href="sections.html#example-01abc109"></a> The following example shows how an aside is used to mark up background material on Switzerland
    in a much longer news story on Europe. 
<pre class="highlight"><span class="nt">&lt;aside&gt;</span>
  <span class="nt">&lt;h2&gt;</span>Switzerland<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;p&gt;</span>Switzerland, a land-locked country in the middle of geographic
  Europe, has not joined the geopolitical European Union, though it is
  a signatory to a number of European treaties.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/aside&gt;</span>
</pre>
     </div>
     <div class="example" id="example-c227d2de">
      <a class="self-link" href="sections.html#example-c227d2de"></a> The following example shows how an aside is used to mark up a pull quote in a longer article. 
<pre class="highlight">...

<span class="nt">&lt;p&gt;</span>He later joined a large company, continuing on the same work.
<span class="nt">&lt;q&gt;</span>I love my job. People ask me what I do for fun when I’m not at
work. But I’m paid to do my hobby, so I never know what to
answer. Some people wonder what they would do if they didn’t have to
work... but I know what I would do, because I was unemployed for a
year, and I filled that time doing exactly what I do now.<span class="nt">&lt;/q&gt;&lt;/p&gt;</span>

<span class="nt">&lt;aside&gt;</span>
  <span class="nt">&lt;q&gt;</span> People ask me what I do for fun when I’m not at work. But I’m
  paid to do my hobby, so I never know what to answer. <span class="nt">&lt;/q&gt;</span>
<span class="nt">&lt;/aside&gt;</span>

<span class="nt">&lt;p&gt;</span>Of course his work — or should that be hobby? —      <wbr>isn’t his only passion. He also enjoys other pleasures.<span class="nt">&lt;/p&gt;</span>

...
</pre>
     </div>
     <div class="example" id="example-650ac100">
      <a class="self-link" href="sections.html#example-650ac100"></a> The following extract shows how <code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-9">aside</a></code> can be used for blogrolls and other side
    content on a blog: 
<pre class="highlight"><span class="nt">&lt;body&gt;</span>
  <span class="nt">&lt;header&gt;</span>
    <span class="nt">&lt;h1&gt;</span>My wonderful blog<span class="nt">&lt;/h1&gt;</span>
    <span class="nt">&lt;p&gt;</span>My tagline<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/header&gt;</span>
  <span class="nt">&lt;aside&gt;</span>
    <span class="c">&lt;!-- </span><em><span class="c">this aside contains two sections that are tangentially related</span>
<span class="c">    to the page, namely, links to other blogs, and links to blog posts</span>
<span class="c">    from this blog</span></em><span class="c"> --&gt;</span>
    <span class="nt">&lt;nav&gt;</span>
      <span class="nt">&lt;h2&gt;</span>My blogroll<span class="nt">&lt;/h2&gt;</span>
      <span class="nt">&lt;ul&gt;</span>
        <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"https://blog.example.com/"</span><span class="nt">&gt;</span>Example Blog<span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;/ul&gt;</span>
    <span class="nt">&lt;/nav&gt;</span>
    <span class="nt">&lt;nav&gt;</span>
      <span class="nt">&lt;h2&gt;</span>Archives<span class="nt">&lt;/h2&gt;</span>
      <span class="nt">&lt;ol</span> <span class="na">reversed</span><span class="nt">&gt;</span>
        <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/last-post"</span><span class="nt">&gt;</span>My last post<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/first-post"</span><span class="nt">&gt;</span>My first post<span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;/ol&gt;</span>
    <span class="nt">&lt;/nav&gt;</span>
  <span class="nt">&lt;/aside&gt;</span>
  <span class="nt">&lt;aside&gt;</span>
    <span class="c">&lt;!-- </span><em><span class="c">this aside is tangentially related to the page also, it</span>
<span class="c">    contains twitter messages from the blog author</span></em><span class="c"> --&gt;</span>
    <span class="nt">&lt;h2&gt;</span>Twitter Feed<span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;blockquote</span> <span class="na">cite=</span><span class="s">"https://twitter.example.net/t31351234"</span><span class="nt">&gt;</span>
      I’m on vacation, writing my blog.
    <span class="nt">&lt;/blockquote&gt;</span>
    <span class="nt">&lt;blockquote</span> <span class="na">cite=</span><span class="s">"https://twitter.example.net/t31219752"</span><span class="nt">&gt;</span>
      I’m going to go on vacation soon.
    <span class="nt">&lt;/blockquote&gt;</span>
  <span class="nt">&lt;/aside&gt;</span>
  <span class="nt">&lt;article&gt;</span>
    <span class="c">&lt;!-- </span><em><span class="c">this is a blog post</span></em><span class="c"> --&gt;</span>
    <span class="nt">&lt;h2&gt;</span>My last post<span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;p&gt;</span>This is my last post.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;footer&gt;</span>
      <span class="nt">&lt;p&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/last-post"</span> <span class="na">rel=</span><span class="s">bookmark</span><span class="nt">&gt;</span>Permalink<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/footer&gt;</span>
  <span class="nt">&lt;/article&gt;</span>
  <span class="nt">&lt;article&gt;</span>
    <span class="c">&lt;!-- </span><em><span class="c">this is also a blog post</span></em><span class="c"> --&gt;</span>
    <span class="nt">&lt;h2&gt;</span>My first post<span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;p&gt;</span>This is my first post.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;aside&gt;</span>
      <span class="c">&lt;!-- </span><em><span class="c">this aside is about the blog post, since it’s inside the</span>
<span class="c">      &lt;article&gt; element; it would be wrong, for instance, to put the</span>
<span class="c">        blogroll here, since the blogroll isn’t really related to this post</span>
<span class="c">        specifically, only to the page as a whole</span></em><span class="c"> --&gt;</span>
        <span class="nt">&lt;h1&gt;</span>Posting<span class="nt">&lt;/h1&gt;</span>
        <span class="nt">&lt;p&gt;</span>While I’m thinking about it, I wanted to say something about
        posting. Posting is fun!<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/aside&gt;</span>
    <span class="nt">&lt;footer&gt;</span>
      <span class="nt">&lt;p&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/first-post"</span> <span class="na">rel=</span><span class="s">bookmark</span><span class="nt">&gt;</span>Permalink<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/footer&gt;</span>
  <span class="nt">&lt;/article&gt;</span>
  <span class="nt">&lt;footer&gt;</span>
    <span class="nt">&lt;nav&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/archives"</span><span class="nt">&gt;</span>Archives<span class="nt">&lt;/a&gt;</span> —      <wbr><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/about"</span><span class="nt">&gt;</span>About me<span class="nt">&lt;/a&gt;</span> —      <wbr><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/copyright"</span><span class="nt">&gt;</span>Copyright<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/nav&gt;</span>
  <span class="nt">&lt;/footer&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.3.6" id="the-h1-h2-h3-h4-h5-and-h6-elements"><span class="secno">4.3.6. </span><span class="content"> The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-h1"><code>h1</code></dfn>, <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-h2"><code>h2</code></dfn>, <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-h3"><code>h3</code></dfn>, <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-h4"><code>h4</code></dfn>, <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-h5"><code>h5</code></dfn>, and <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-h6"><code>h6</code></dfn> elements </span><a class="self-link" href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-14">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-22">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#heading-content" id="ref-for-heading-content-2">Heading content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-6">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-13">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-23">flow content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-16">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-18">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-13">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-14">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-13">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd> <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#heading"><code>heading</code></a> role (default - <a data-link-type="dfn" href="dom.html#do-not-set" id="ref-for-do-not-set-7"><em>do not set</em></a>), <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#tab"><code>tab</code></a> or <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#presentation"><code>presentation</code></a>. 
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-15">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-13">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLHeadingElement" data-dfn-type="interface" data-export="" id="htmlheadingelement-htmlheadingelement">HTMLHeadingElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-23">HTMLElement</a> {};
</pre>
     </dd></dl>
     <p>These elements <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-15">represent</a> headings for their sections.</p>
     <p>These elements have a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="rank">rank</dfn> given by the number in their name. The <code>h1</code> element has the highest rank, the <code>h6</code> element has the lowest rank, and two
  elements with the same name have equal rank.</p>
     <p>Use the <a data-link-type="dfn" href="sections.html#rank" id="ref-for-rank-1">rank</a> of heading elements to create the document outline.</p>
     <div class="example" id="example-2d31b1f6">
      <a class="self-link" href="sections.html#example-2d31b1f6"></a> The following code shows how to mark up a document outline with six levels of headings. 
<pre class="highlight"><span class="nt">&lt;body&gt;</span>
<span class="nt">&lt;h1&gt;</span>top level heading<span class="nt">&lt;/h1&gt;</span>
 <span class="nt">&lt;section&gt;&lt;h2&gt;</span>2nd level heading<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;section&gt;&lt;h3&gt;</span>3nd level heading<span class="nt">&lt;/h3&gt;</span>
   <span class="nt">&lt;section&gt;&lt;h4&gt;</span>4th level heading<span class="nt">&lt;/h4&gt;</span>
    <span class="nt">&lt;section&gt;&lt;h5&gt;</span>5th level heading<span class="nt">&lt;/h5&gt;</span>
     <span class="nt">&lt;section&gt;&lt;h6&gt;</span>6th level heading<span class="nt">&lt;/h6&gt;</span>
     <span class="nt">&lt;/section&gt;</span>
    <span class="nt">&lt;/section&gt;</span>
 <span class="nt">&lt;/section&gt;</span>
<span class="nt">&lt;/section&gt;</span>
<span class="nt">&lt;/section&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</pre>
      <p class="note" role="note">The document outline would be the same if the <code><a data-link-type="element" href="sections.html#elementdef-section" id="ref-for-elementdef-section-14">section</a></code> elements were not used.</p>
     </div>
     <p><code>h2</code>–<code>h6</code> elements must not be used to markup subheadings, subtitles,
  alternative titles and taglines unless intended to be the heading for a new section or subsection.
  Instead use the markup patterns in the <a href="common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements">§4.13 Common idioms without dedicated elements</a> section of
  the specification.</p>
     <p>Assistive technology often announces the presence and level of a heading to users, as a hint
  to understand the structure of a document and construct a 'mental model' of its outline. For example
  the <code>role</code> of the element, which in this case is "heading" and the heading level "1" to "6", can be
   announced by screen reader software when a user navigates to an <code>h1</code>–<code>h6</code> element.
   User Agents may also provide methods to navigate to <code>h1</code>–<code>h6</code> elements.</p>
     <div class="example" id="example-2aed5d63">
      <a class="self-link" href="sections.html#example-2aed5d63"></a> As far as their respective document outlines (their heading and section structures) are
    concerned, these two snippets are semantically equivalent: 
<pre class="highlight"><span class="nt">&lt;body&gt;</span>
  <span class="nt">&lt;h1&gt;</span>Let’s call it a draw(ing surface)<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;h2&gt;</span>Diving in<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;h2&gt;</span>Simple shapes<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;h2&gt;</span>Canvas coordinates<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;h3&gt;</span>Canvas coordinates diagram<span class="nt">&lt;/h3&gt;</span>
  <span class="nt">&lt;h2&gt;</span>Paths<span class="nt">&lt;/h2&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</pre>
<pre class="highlight"><span class="nt">&lt;body&gt;</span>
  <span class="nt">&lt;h1&gt;</span>Let’s call it a draw(ing surface)<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;section&gt;</span>
    <span class="nt">&lt;h2&gt;</span>Diving in<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;/section&gt;</span>
  <span class="nt">&lt;section&gt;</span>
    <span class="nt">&lt;h2&gt;</span>Simple shapes<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;/section&gt;</span>
  <span class="nt">&lt;section&gt;</span>
    <span class="nt">&lt;h2&gt;</span>Canvas coordinates<span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;section&gt;</span>
      <span class="nt">&lt;h3&gt;</span>Canvas coordinates diagram<span class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;/section&gt;</span>
  <span class="nt">&lt;/section&gt;</span>
  <span class="nt">&lt;section&gt;</span>
    <span class="nt">&lt;h2&gt;</span>Paths<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;/section&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</pre>
      <p>Authors might prefer the former style for its terseness, or the latter style for its convenience
    in the face of heavy editing; which is best is purely an issue of preferred authoring style.</p>
      <p>The two styles can be combined, for compatibility with legacy tools while still future-proofing
    for when that compatibility is no longer needed.</p>
     </div>
     <p class="note" role="note">The semantics and meaning of the <code>h1</code>–<code>h6</code> elements are further
 detailed in the section on <a href="sections.html#headings-and-sections">§4.3.10 Headings and sections</a>.</p>
     <h4 class="heading settled" data-level="4.3.7" id="the-header-element"><span class="secno">4.3.7. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-header"><code>header</code></dfn> element</span><a class="self-link" href="sections.html#the-header-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-15">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-24">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-7">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-14">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-25">flow content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-17">Content model</a>:
      </dt><dd> <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-26">Flow content</a>, but with no <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-8">main</a></code> element descendants, or <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-3">header</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-5">footer</a></code> elements
    that are not descendants of <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-10">sectioning content</a> which is a descendant of the <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-4">header</a></code>. 
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-14">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-15">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-14">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd> <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#banner"><code>banner</code></a> role (default - <a data-link-type="dfn" href="dom.html#do-not-set" id="ref-for-do-not-set-8"><em>do not set</em></a>) or <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#presentation"><code>presentation</code></a>. 
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-16">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-14">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-24">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-5">header</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-16">represents</a> introductory content for its nearest ancestor <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-11">sectioning content</a> or <a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-3">sectioning root</a> element. A <code>header</code> typically
  contains a group of introductory or navigational aids.</p>
     <p>When the nearest ancestor <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-12">sectioning content</a> or <a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-4">sectioning root</a> element is <a href="sections.html#the-body-element">the <code>body</code> element</a>, then it applies to the whole page.</p>
     <p class="note" role="note"> A <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-6">header</a></code> element is intended to usually contain the section’s heading (an <code>h1</code>–<code>h6</code> element), but this is not required. The <code>header</code> element can also be used to wrap a section’s table of contents, a search form, or any relevant
    logos. </p>
     <p>Assistive Technology may convey the semantics of the <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-7">header</a></code> to users when the
 nearest ancestor <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-13">sectioning content</a> or <a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-5">sectioning root</a> element is the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-37">body</a></code> element.
   This information can provide a hint to users as to the type of content.  For example the <code>role</code> of the element, which in this case is "banner", can be announced by screen reader software when a
   user navigates to an <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-8">header</a></code> element that is scoped to the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-38">body</a></code> element. User Agents may
   also provide methods to navigate to <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-9">header</a></code> elements scoped to the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-39">body</a></code> element.</p>
     <div class="example" id="example-1f4ae941">
      <a class="self-link" href="sections.html#example-1f4ae941"></a> Here are some sample headers. This first one is for a game: 
<pre class="highlight"><span class="nt">&lt;header&gt;</span>
  <span class="nt">&lt;p&gt;</span>Welcome to...<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;h1&gt;</span>Voidwars!<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/header&gt;</span>
</pre>
      <p>The following snippet shows how the element can be used to mark
    up a specification’s header:</p>
<pre class="highlight"><span class="nt">&lt;header&gt;</span>
  <span class="nt">&lt;h1&gt;</span>Scalable Vector Graphics (SVG) 1.2<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;p&gt;</span>W3C Working Draft 27 October 2004<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;dl&gt;</span>
    <span class="nt">&lt;dt&gt;</span>This version:<span class="nt">&lt;/dt&gt;</span>
    <span class="nt">&lt;dd&gt;&lt;a</span> <span class="na">href=</span><span class="s">"https://www.w3.org/TR/2004/WD-SVG12-20041027/"</span><span class="nt">&gt;</span>https://www.w3.org/TR/2004/WD-SVG12-20041027/<span class="nt">&lt;/a&gt;&lt;/dd&gt;</span>
    <span class="nt">&lt;dt&gt;</span>Previous version:<span class="nt">&lt;/dt&gt;</span>
    <span class="nt">&lt;dd&gt;&lt;a</span> <span class="na">href=</span><span class="s">"https://www.w3.org/TR/2004/WD-SVG12-20040510/"</span><span class="nt">&gt;</span>https://www.w3.org/TR/2004/WD-SVG12-20040510/<span class="nt">&lt;/a&gt;&lt;/dd&gt;</span>
    <span class="nt">&lt;dt&gt;</span>Latest version of SVG 1.2:<span class="nt">&lt;/dt&gt;</span>
    <span class="nt">&lt;dd&gt;&lt;a</span> <span class="na">href=</span><span class="s">"https://www.w3.org/TR/SVG12/"</span><span class="nt">&gt;</span>https://www.w3.org/TR/SVG12/<span class="nt">&lt;/a&gt;&lt;/dd&gt;</span>
    <span class="nt">&lt;dt&gt;</span>Latest SVG Recommendation:<span class="nt">&lt;/dt&gt;</span>
    <span class="nt">&lt;dd&gt;&lt;a</span> <span class="na">href=</span><span class="s">"https://www.w3.org/TR/SVG/"</span><span class="nt">&gt;</span>https://www.w3.org/TR/SVG/<span class="nt">&lt;/a&gt;&lt;/dd&gt;</span>
    <span class="nt">&lt;dt&gt;</span>Editor:<span class="nt">&lt;/dt&gt;</span>
    <span class="nt">&lt;dd&gt;</span>Dean Jackson, W3C, <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"mailto:dean@w3.org"</span><span class="nt">&gt;</span>dean@w3.org<span class="nt">&lt;/a&gt;&lt;/dd&gt;</span>
    <span class="nt">&lt;dt&gt;</span>Authors:<span class="nt">&lt;/dt&gt;</span>
    <span class="nt">&lt;dd&gt;</span>See <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#authors"</span><span class="nt">&gt;</span>Author List<span class="nt">&lt;/a&gt;&lt;/dd&gt;</span>
  <span class="nt">&lt;/dl&gt;</span>
  <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"copyright"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"https://www.w3.org/Consortium/Legal/ipr-notic</span> <em><span class="err">...</span></em>
<span class="err">&lt;/</span><span class="na">header</span><span class="nt">&gt;</span>
</pre>
     </div>
     <p class="note" role="note"> The <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-10">header</a></code> element is not <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-14">sectioning content</a>; it doesn’t introduce a new
    section. </p>
     <div class="example" id="example-46276238">
      <a class="self-link" href="sections.html#example-46276238"></a> In this example, the page has a page heading given by the <code>h1</code> element, and two
  subsections whose headings are given by <code>h2</code> elements. The content after the <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-11">header</a></code> element is still part of the last subsection started in the <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-12">header</a></code> element, because the <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-13">header</a></code> element doesn’t take part in the <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-5">outline</a> algorithm. 
<pre class="highlight"><span class="nt">&lt;body&gt;</span>
  <span class="nt">&lt;header&gt;</span>
    <span class="nt">&lt;h1&gt;</span>Little Green Guys With Guns<span class="nt">&lt;/h1&gt;</span>
    <span class="nt">&lt;nav&gt;</span>
      <span class="nt">&lt;ul&gt;</span>
      <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/games"</span><span class="nt">&gt;</span>Games<span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/forum"</span><span class="nt">&gt;</span>Forum<span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/download"</span><span class="nt">&gt;</span>Download<span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;/ul&gt;</span>
    <span class="nt">&lt;/nav&gt;</span>
    <span class="nt">&lt;h2&gt;</span>Important News<span class="nt">&lt;/h2&gt;</span> <span class="c">&lt;!-- this starts a second subsection --&gt;</span>
    <span class="c">&lt;!-- this is part of the subsection entitled "Important News" --&gt;</span>
    <span class="nt">&lt;p&gt;</span>To play today’s games you will need to update your client.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;h2&gt;</span>Games<span class="nt">&lt;/h2&gt;</span> <span class="c">&lt;!-- this starts a third subsection --&gt;</span>
    <span class="nt">&lt;/header&gt;</span>
    <span class="nt">&lt;p&gt;</span>You have three active games:<span class="nt">&lt;/p&gt;</span>
    <span class="c">&lt;!-- this is still part of the subsection entitled "Games" --&gt;</span>
    ...
</pre>
     </div>
     <p class="note" role="note"> For cases where an developer wants to nest a <code>header</code> or <code>footer</code> within
  another <code>header</code>: The <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-14">header</a></code> element can only contain a <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-15">header</a></code> or <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-6">footer</a></code> if they are themselves contained within <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-15">sectioning content</a>. </p>
     <div class="example" id="example-6f9fce34">
      <a class="self-link" href="sections.html#example-6f9fce34"></a> 
      <p>In this example, the <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-20">article</a></code> has a <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-16">header</a></code> which contains an <code>aside</code> which itself contains a <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-17">header</a></code>. This is conforming as the descendant <code>header</code> is contained
  within the <code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-10">aside</a></code> element.</p>
<pre class="highlight"><span class="nt">&lt;article&gt;</span>
  <span class="nt">&lt;header&gt;</span>
    <span class="nt">&lt;h1&gt;</span>Flexbox: The definitive guide<span class="nt">&lt;/h1&gt;</span>
    <span class="nt">&lt;aside&gt;</span>
      <span class="nt">&lt;header&gt;</span>
        <span class="nt">&lt;h2&gt;</span>About the author: Wes McSilly<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;p&gt;&lt;a</span> <span class="na">href=</span><span class="s">"./wes-mcsilly/"</span><span class="nt">&gt;</span>Contact him! (Why would you?)<span class="nt">&lt;/a&gt;&lt;/p&gt;</span>
      <span class="nt">&lt;/header&gt;</span>
      <span class="nt">&lt;p&gt;</span>Expert in nothing but Flexbox. Talented circus sideshow.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/aside&gt;</span>
  <span class="nt">&lt;/header&gt;</span>
  <span class="nt">&lt;p&gt;&lt;ins&gt;</span>The guide about Flexbox was supposed to be here, but it
    turned out Wes wasn’t a Flexbox expert either.<span class="nt">&lt;/ins&gt;&lt;/p&gt;</span>
<span class="nt">&lt;/article&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.3.8" id="the-footer-element"><span class="secno">4.3.8. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-footer"><code>footer</code></dfn> element</span><a class="self-link" href="sections.html#the-footer-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-16">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-27">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-8">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-15">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-28">flow content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-18">Content model</a>:
      </dt><dd> <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-29">Flow content</a>, but with no <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-9">main</a></code> element descendants, or <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-18">header</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-7">footer</a></code> elements
    that are not descendants of <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-16">sectioning content</a> which is a descendant of the <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-8">footer</a></code>. 
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-15">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-16">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-15">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd> <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#contentinfo"><code>contentinfo</code></a> role (default - <a data-link-type="dfn" href="dom.html#do-not-set" id="ref-for-do-not-set-9"><em>do not set</em></a>) or <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#presentation"><code>presentation</code></a>. 
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-17">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-15">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-25">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-9">footer</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-17">represents</a> a footer for its nearest ancestor <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-17">sectioning content</a> or <a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-6">sectioning root</a> element. A footer typically contains
  information about its section such as who wrote it, links to related documents, copyright data,
  and the like.</p>
     <p>When the <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-10">footer</a></code> element contains entire sections, they <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-18">represent</a> appendices,
  indexes, long colophons, verbose license agreements, and other such content.</p>
     <p>Assistive Technology may convey the semantics of the <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-11">footer</a></code> to users when the
 nearest ancestor <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-18">sectioning content</a> or <a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-7">sectioning root</a> element is the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-40">body</a></code> element.
   This information can provide a hint to users as to the type of content.  For example the <code>role</code> of the element, which in this case is "content information", can be announced by screen reader software when a
   user navigates to an <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-12">footer</a></code> element that is scoped to the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-41">body</a></code> element. User Agents may
   also provide methods to navigate to <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-13">footer</a></code> elements scoped to the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-42">body</a></code> element.</p>
     <p class="note" role="note"> Contact information for the author or editor of a section belongs in an <code>address</code> element, possibly itself inside a <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-14">footer</a></code>. Bylines and other information that could
    be suitable for both a <code>header</code> or a <code>footer</code> can be placed in either (or
    neither). The primary purpose of these elements is merely to help the author write
    self-explanatory markup that is easy to maintain and style; they are not intended to impose
    specific structures on authors. </p>
     <p>Footers don’t necessarily have to appear at the <em>end</em> of a section, though they usually do.</p>
     <p>When the nearest ancestor <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-19">sectioning content</a> or <a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-8">sectioning root</a> element is <a href="sections.html#the-body-element">the <code>body</code> element</a>, then it applies to the whole page.</p>
     <p class="note" role="note"> The <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-15">footer</a></code> element is not <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-20">sectioning content</a>; it doesn’t introduce a new
    section. </p>
     <div class="example" id="example-cd90f13e">
      <a class="self-link" href="sections.html#example-cd90f13e"></a> Here is a page with two footers, one at the top and one at the bottom, with the same content: 
<pre class="highlight"><span class="nt">&lt;body&gt;</span>
  <span class="nt">&lt;footer&gt;&lt;a</span> <span class="na">href=</span><span class="s">"../"</span><span class="nt">&gt;</span>Back to index...<span class="nt">&lt;/a&gt;&lt;/footer&gt;</span>
  <span class="nt">&lt;div&gt;</span>
    <span class="nt">&lt;h1&gt;</span>Lorem ipsum<span class="nt">&lt;/h1&gt;</span>
    <span class="nt">&lt;p&gt;</span>The ipsum of all lorems<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;p&gt;</span>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
  ea commodo consequat. Duis aute irure dolor in reprehenderit in
  voluptate velit esse cillum dolore eu fugiat nulla
  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
  culpa qui officia deserunt mollit anim id est laborum.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;footer&gt;&lt;a</span> <span class="na">href=</span><span class="s">"../"</span><span class="nt">&gt;</span>Back to index...<span class="nt">&lt;/a&gt;&lt;/footer&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</pre>
     </div>
     <div class="example" id="example-86d84160">
      <a class="self-link" href="sections.html#example-86d84160"></a> Here is an example which shows the <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-16">footer</a></code> element being used both for a site-wide
    footer and for a section footer. 
<pre class="highlight"><span class="cp">&lt;!DOCTYPE HTML&gt;</span>
<span class="nt">&lt;HTML&gt;&lt;HEAD&gt;</span>
<span class="nt">&lt;TITLE&gt;</span>The Ramblings of a Scientist<span class="nt">&lt;/TITLE&gt;</span>
<span class="nt">&lt;BODY&gt;</span>
<span class="nt">&lt;h1&gt;</span>The Ramblings of a Scientist<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;MAIN&gt;</span>
  <span class="nt">&lt;ARTICLE&gt;</span>
  <span class="nt">&lt;H2&gt;</span>Episode 15<span class="nt">&lt;/H2&gt;</span>
  <span class="nt">&lt;VIDEO</span> <span class="na">SRC=</span><span class="s">"/fm/015.ogv"</span> <span class="na">CONTROLS</span> <span class="na">PRELOAD</span><span class="nt">&gt;</span>
  <span class="nt">&lt;P&gt;&lt;A</span> <span class="na">HREF=</span><span class="s">"/fm/015.ogv"</span><span class="nt">&gt;</span>Download video<span class="nt">&lt;/A&gt;</span>.<span class="nt">&lt;/P&gt;</span>
  <span class="nt">&lt;/VIDEO&gt;</span>
  <span class="nt">&lt;FOOTER&gt;</span> <span class="c">&lt;!-- footer for article --&gt;</span>
  <span class="nt">&lt;P&gt;</span>Published <span class="nt">&lt;TIME</span> <span class="na">DATETIME=</span><span class="s">"2009-10-21T18:26-07:00"</span><span class="nt">&gt;</span>on 2009/10/21 at 6:26pm<span class="nt">&lt;/TIME&gt;&lt;/P&gt;</span>
  <span class="nt">&lt;/FOOTER&gt;</span>
<span class="nt">&lt;/ARTICLE&gt;</span>
<span class="nt">&lt;ARTICLE&gt;</span>
  <span class="nt">&lt;H2&gt;</span>My Favorite Trains<span class="nt">&lt;/H2&gt;</span>
  <span class="nt">&lt;P&gt;</span>I love my trains. My favorite train of all time is a Köf.<span class="nt">&lt;/P&gt;</span>
  <span class="nt">&lt;P&gt;</span>It is fun to see them pull some coal cars because they look so
  dwarfed in comparison.<span class="nt">&lt;/P&gt;</span>
  <span class="nt">&lt;FOOTER&gt;</span> <span class="c">&lt;!-- footer for article --&gt;</span>
  <span class="nt">&lt;P&gt;</span>Published <span class="nt">&lt;TIME</span> <span class="na">DATETIME=</span><span class="s">"2009-09-15T14:54-07:00"</span><span class="nt">&gt;</span>on 2009/09/15 at 2:54pm<span class="nt">&lt;/TIME&gt;&lt;/P&gt;</span>
  <span class="nt">&lt;/FOOTER&gt;</span>
  <span class="nt">&lt;/ARTICLE&gt;</span>
<span class="nt">&lt;/MAIN&gt;</span>
<span class="nt">&lt;FOOTER&gt;</span> <span class="c">&lt;!-- site wide footer --&gt;</span>
  <span class="nt">&lt;NAV&gt;</span>
  <span class="nt">&lt;P&gt;&lt;A</span> <span class="na">HREF=</span><span class="s">"/credits.html"</span><span class="nt">&gt;</span>Credits<span class="nt">&lt;/A&gt;</span> —      <wbr><span class="nt">&lt;A</span> <span class="na">HREF=</span><span class="s">"/tos.html"</span><span class="nt">&gt;</span>Terms of Service<span class="nt">&lt;/A&gt;</span> —      <wbr><span class="nt">&lt;A</span> <span class="na">HREF=</span><span class="s">"/index.html"</span><span class="nt">&gt;</span>Blog Index<span class="nt">&lt;/A&gt;&lt;/P&gt;</span>
  <span class="nt">&lt;/NAV&gt;</span>
  <span class="nt">&lt;P&gt;</span>Copyright © 2009 Gordon Freeman<span class="nt">&lt;/P&gt;</span>
<span class="nt">&lt;/FOOTER&gt;</span>
<span class="nt">&lt;/BODY&gt;</span>
<span class="nt">&lt;/HTML&gt;</span>
</pre>
     </div>
     <div class="example" id="example-aedc9816">
      <a class="self-link" href="sections.html#example-aedc9816"></a> Some site designs have what is sometimes referred to as "fat footers" — footers that contain a
    lot of material, including images, links to other articles, links to pages for sending feedback,
    special offers... in some ways, a whole "front page" in the footer. 
      <p>This fragment shows the bottom of a page on a site with a "fat footer":</p>
<pre class="highlight">...
  <span class="nt">&lt;footer&gt;</span>
    <span class="nt">&lt;nav&gt;</span>
      <span class="nt">&lt;section&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Articles<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;p&gt;&lt;img</span> <span class="na">src=</span><span class="s">"images/somersaults.jpeg"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">&gt;</span> Go to the gym with
        our somersaults class! Our teacher Jim takes you through the paces
        in this two-part article. <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"articles/somersaults/1"</span><span class="nt">&gt;</span>Part
        1<span class="nt">&lt;/a&gt;</span> · <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"articles/somersaults/2"</span><span class="nt">&gt;</span>Part 2<span class="nt">&lt;/a&gt;&lt;/p&gt;</span>
        <span class="nt">&lt;p&gt;&lt;img</span> <span class="na">src=</span><span class="s">"images/kindplus.jpeg"</span><span class="nt">&gt;</span> Tired of walking on the edge of
        a clif<span class="c">&lt;!-- sic --&gt;</span>? Our guest writer Lara shows you how to bumble
        your way through the bars. <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"articles/kindplus/1"</span><span class="nt">&gt;</span>Read
        more...<span class="nt">&lt;/a&gt;&lt;/p&gt;</span>
        <span class="nt">&lt;p&gt;&lt;img</span> <span class="na">src=</span><span class="s">"images/crisps.jpeg"</span><span class="nt">&gt;</span> The chips are down, now all
        that’s left is a potato. What can you do with it? <span class="nt">&lt;a</span>
        <span class="na">href=</span><span class="s">"articles/crisps/1"</span><span class="nt">&gt;</span>Read more...<span class="nt">&lt;/a&gt;&lt;/p&gt;</span>
      <span class="nt">&lt;/section&gt;</span>
      <span class="nt">&lt;ul&gt;</span>
        <span class="nt">&lt;li&gt;</span> <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/about"</span><span class="nt">&gt;</span>About us...<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;li&gt;</span> <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/feedback"</span><span class="nt">&gt;</span>Send feedback!<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;li&gt;</span> <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/sitemap"</span><span class="nt">&gt;</span>Sitemap<span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;/ul&gt;</span>
    <span class="nt">&lt;/nav&gt;</span>
    <span class="nt">&lt;p&gt;&lt;small&gt;</span>Copyright © 2015 The Snacker —      <wbr><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/tos"</span><span class="nt">&gt;</span>Terms of Service<span class="nt">&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;</span>
  <span class="nt">&lt;/footer&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.3.9" id="the-address-element"><span class="secno">4.3.9. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-address"><code>address</code></dfn> element</span><a class="self-link" href="sections.html#the-address-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-17">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-30">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-9">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-16">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-31">flow content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-19">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-32">Flow content</a>, but with no <a data-link-type="dfn" href="dom.html#heading-content" id="ref-for-heading-content-3">heading
    content</a> descendants, no <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-21">sectioning content</a> descendants, and no <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-19">header</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-17">footer</a></code>, or <code><a data-link-type="element" href="sections.html#elementdef-address" id="ref-for-elementdef-address-5">address</a></code> element descendants.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-16">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-17">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-16">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#contentinfo"><code>contentinfo</code></a> role.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-18">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-16">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-26">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="sections.html#elementdef-address" id="ref-for-elementdef-address-6">address</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-19">represents</a> the contact information for its nearest <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-21">article</a></code> or <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-43">body</a></code> element ancestor. If that is <a href="sections.html#the-body-element">the <code>body</code> element</a>,
    then the contact information applies to the document as a whole.</p>
     <div class="example" id="example-0476e6cf">
      <a class="self-link" href="sections.html#example-0476e6cf"></a> For example, a page at the W3C Web site related to HTML might include the following contact
    information: 
<pre class="highlight"><span class="nt">&lt;ADDRESS&gt;</span>
  <span class="nt">&lt;A</span> <span class="na">href=</span><span class="s">"../People/Raggett/"</span><span class="nt">&gt;</span>Dave Raggett<span class="nt">&lt;/A&gt;</span>,
  <span class="nt">&lt;A</span> <span class="na">href=</span><span class="s">"../People/Arnaud/"</span><span class="nt">&gt;</span>Arnaud Le Hors<span class="nt">&lt;/A&gt;</span>,
  contact persons for the <span class="nt">&lt;A</span> <span class="na">href=</span><span class="s">"Activity"</span><span class="nt">&gt;</span>W3C HTML Activity<span class="nt">&lt;/A&gt;</span>
<span class="nt">&lt;/ADDRESS&gt;</span>
</pre>
     </div>
     <p>The <code><a data-link-type="element" href="sections.html#elementdef-address" id="ref-for-elementdef-address-7">address</a></code> element must not be used to represent arbitrary addresses (e.g., postal
  addresses), unless those addresses are in fact the relevant contact information. (The <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-17">p</a></code> element is the appropriate element for marking up postal addresses in general.)</p>
     <p>The <code><a data-link-type="element" href="sections.html#elementdef-address" id="ref-for-elementdef-address-8">address</a></code> element must not contain information other than contact information.</p>
     <div class="example" id="example-a01fee38">
      <a class="self-link" href="sections.html#example-a01fee38"></a> For example, the following is non-conforming use of the <code><a data-link-type="element" href="sections.html#elementdef-address" id="ref-for-elementdef-address-9">address</a></code> element: 
<pre class="bad highlight"><span class="nt">&lt;ADDRESS&gt;</span>Last Modified: 1999/12/24 23:37:50<span class="nt">&lt;/ADDRESS&gt;</span>
</pre>
     </div>
     <p>Typically, the <code><a data-link-type="element" href="sections.html#elementdef-address" id="ref-for-elementdef-address-10">address</a></code> element would be included along with other information in a <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-18">footer</a></code> element.</p>
     <div class="impl">
       The contact information for a node <var>node</var> is a collection of <code>address</code> elements defined by the first applicable entry from the following list: 
      <dl class="switch">
       <dt>If <var>node</var> is an <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-22">article</a></code> element
       </dt><dt>If <var>node</var> is a <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-44">body</a></code> element
       </dt><dd> The contact information consists of all the <code><a data-link-type="element" href="sections.html#elementdef-address" id="ref-for-elementdef-address-11">address</a></code> elements that have <var>node</var> as an ancestor and do not have another <code>body</code> or <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-23">article</a></code> element ancestor that is a descendant of <var>node</var>. 
       </dd><dt>If <var>node</var> has an ancestor element that is an <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-24">article</a></code> element
       </dt><dt>If <var>node</var> has an ancestor element that is a <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-45">body</a></code> element
       </dt><dd> The contact information of <var>node</var> is the same as the contact information of the
        nearest <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-25">article</a></code> or <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-46">body</a></code> element ancestor, whichever is nearest. 
       </dd><dt>If <var>node</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a> has a <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-47">body</a></code> element
       </dt><dd> The contact information of <var>node</var> is the same as the contact information of <a href="sections.html#the-body-element">the <code>body</code> element</a> of the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>. 
       </dd><dt>Otherwise
       </dt><dd> There is no contact information for <var>node</var>.
      </dd></dl>
      <p>User agents may expose the contact information of a node to the user, or use it for other
    purposes, such as indexing sections based on the sections' contact information.</p>
     </div>
     <div class="example" id="example-99e79042">
      <a class="self-link" href="sections.html#example-99e79042"></a> In this example the footer contains contact information and a copyright notice. 
<pre class="highlight"><span class="nt">&lt;footer&gt;</span>
  <span class="nt">&lt;address&gt;</span>
  For more details, contact
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"mailto:js@example.com"</span><span class="nt">&gt;</span>John Smith<span class="nt">&lt;/a&gt;</span>.
  <span class="nt">&lt;/address&gt;</span>
  <span class="nt">&lt;p&gt;&lt;small&gt;</span>© copyright 2038 Example Corp.<span class="nt">&lt;/small&gt;&lt;/p&gt;</span>
<span class="nt">&lt;/footer&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.3.10" id="headings-and-sections"><span class="secno">4.3.10. </span><span class="content">Headings and sections</span><a class="self-link" href="sections.html#headings-and-sections"></a></h4>
     <p>The <code>h1</code>–<code>h6</code> elements are headings.</p>
     <p>The first element of <a data-link-type="dfn" href="dom.html#heading-content" id="ref-for-heading-content-4">heading content</a> in an element of <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-22">sectioning content</a> <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-20">represents</a> the heading for that section. Subsequent headings of equal or higher <a data-link-type="dfn" href="sections.html#rank" id="ref-for-rank-2">rank</a> start new (implied) sections, headings of lower <a data-link-type="dfn" href="sections.html#rank" id="ref-for-rank-3">rank</a> start implied subsections that are
  part of the previous one. In both cases, the element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-21">represents</a> the heading of the implied
  section.</p>
     <p><code>h1</code>–<code>h6</code> elements must not be used to markup subheadings, subtitles,
  alternative titles and taglines unless intended to be the heading for a new section or subsection.
  Instead use the markup patterns in the <a href="common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements">§4.13 Common idioms without dedicated elements</a> section of
  the specification.</p>
     <p>Certain elements are said to be <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="sectioning-roots">sectioning roots</dfn>, including <code>blockquote</code> and <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-3">td</a></code> elements. These elements can have their own outlines, but the sections and
  headings inside these elements do not contribute to the outlines of their ancestors.</p>
     <ul class="brief category-list">
      <li><code><a data-link-type="element" href="grouping-content.html#elementdef-blockquote" id="ref-for-elementdef-blockquote-6">blockquote</a></code>
      </li><li><code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-48">body</a></code>
      </li><li><code><a data-link-type="element" href="interactive-elements.html#elementdef-details" id="ref-for-elementdef-details-4">details</a></code>
      </li><li><code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-3">dialog</a></code>
      </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-fieldset" id="ref-for-elementdef-fieldset-3">fieldset</a></code>
      </li><li><code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-3">figure</a></code>
      </li><li><code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-4">td</a></code>
     </li></ul>
     <p><a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-23">Sectioning content</a> elements are always considered subsections of their nearest ancestor <a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-9">sectioning root</a> or their nearest ancestor element of <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-24">sectioning content</a>, whichever
  is nearest, regardless of what implied sections other headings may have created.</p>
     <div class="example" id="example-9a54443e">
      <a class="self-link" href="sections.html#example-9a54443e"></a> For the following fragment: 
<pre class="highlight"><span class="nt">&lt;body&gt;</span>
  <span class="nt">&lt;h1&gt;</span>Foo<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;h2&gt;</span>Bar<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;blockquote&gt;</span>
    <span class="nt">&lt;h3&gt;</span>Bla<span class="nt">&lt;/h3&gt;</span>
  <span class="nt">&lt;/blockquote&gt;</span>
  <span class="nt">&lt;p&gt;</span>Baz<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;h2&gt;</span>Quux<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;section&gt;</span>
    <span class="nt">&lt;h3&gt;</span>Thud<span class="nt">&lt;/h3&gt;</span>
  <span class="nt">&lt;/section&gt;</span>
  <span class="nt">&lt;p&gt;</span>Grunt<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</pre>
      <p>...the structure would be:</p>
      <ol>
       <li data-md="">
        <p>Foo (heading of explicit <code>body</code> section, containing the "Grunt" paragraph)</p>
        <ol>
         <li data-md="">
          <p>Bar (heading starting implied section, containing a block quote and the "Baz" paragraph)</p>
         </li><li data-md="">
          <p>Quux (heading starting implied section with no content other than the heading itself)</p>
         </li><li data-md="">
          <p>Thud (heading of explicit <code>section</code> section)</p>
        </li></ol>
      </li></ol>
      <p>Notice how the <code>section</code> ends the earlier implicit section so that a later paragraph
    ("Grunt") is back at the top level.</p>
     </div>
     <p>Sections may contain headings of a <a data-link-type="dfn" href="sections.html#rank" id="ref-for-rank-4">rank</a> equal to their section nesting level. Authors should use
  headings of the appropriate <a data-link-type="dfn" href="sections.html#rank" id="ref-for-rank-5">rank</a> for the section’s nesting level.</p>
     <p>Authors are also encouraged to explicitly wrap sections in elements of <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-25">sectioning content</a>,
  instead of relying on the implicit sections generated by having multiple headings in one element
  of <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-26">sectioning content</a>.</p>
     <div class="example" id="example-c94b2d39">
      <a class="self-link" href="sections.html#example-c94b2d39"></a> For example, the following is correct: 
<pre class="highlight"><span class="nt">&lt;body&gt;</span>
  <span class="nt">&lt;h1&gt;</span>Apples<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;p&gt;</span>Apples are fruit.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;section&gt;</span>
    <span class="nt">&lt;h2&gt;</span>Taste<span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;p&gt;</span>They taste lovely.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;h3&gt;</span>Sweet<span class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;p&gt;</span>Red apples are sweeter than green ones.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;h3&gt;</span>Color<span class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;p&gt;</span>Apples come in various colors.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/section&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</pre>
      <p>However, the same document would be more clearly expressed as:</p>
<pre class="highlight"><span class="nt">&lt;body&gt;</span>
  <span class="nt">&lt;h1&gt;</span>Apples<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;p&gt;</span>Apples are fruit.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;section&gt;</span>
    <span class="nt">&lt;h2&gt;</span>Taste<span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;p&gt;</span>They taste lovely.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;section&gt;</span>
      <span class="nt">&lt;h3&gt;</span>Sweet<span class="nt">&lt;/h3&gt;</span>
      <span class="nt">&lt;p&gt;</span>Red apples are sweeter than green ones.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/section&gt;</span>
  <span class="nt">&lt;/section&gt;</span>
  <span class="nt">&lt;section&gt;</span>
    <span class="nt">&lt;h3&gt;</span>Color<span class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;p&gt;</span>Apples come in various colors.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/section&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</pre>
      <p>Both of the documents above are semantically identical and would produce the same outline in
    compliant user agents.</p>
     </div>
     <h5 class="heading settled" data-level="4.3.10.1" id="creating-an-outline"><span class="secno">4.3.10.1. </span><span class="content">Creating an outline</span><a class="self-link" href="sections.html#creating-an-outline"></a></h5>
     <p class="warning"> There are currently no known native implementations of the outline algorithm in graphical browsers or
    assistive technology user agents, although the algorithm is implemented in other software such
    as conformance checkers and browser extensions. Therefore the <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-6">outline</a> algorithm
  cannot be relied upon to convey document structure to users. Authors should use heading <a data-link-type="dfn" href="sections.html#rank" id="ref-for-rank-6">rank</a> (<code>h1</code>-<code>h6</code>) to convey document structure. </p>
     <p><em>This section is non-normative</em></p>
     <div class="impl"> This section defines an algorithm for creating an outline for a <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-27">sectioning content</a> element or a <a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-10">sectioning root</a> element. It is defined in terms of a walk over the nodes
    of a DOM tree, in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-24">tree order</a>, with each node being visited when it is <i>entered</i> and
    when it is <i>exited</i> during the walk. </div>
     <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="outline">outline</dfn> for a <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-28">sectioning content</a> element or a <a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-11">sectioning root</a> element
  consists of a list of one or more potentially nested <a data-link-type="dfn" href="sections.html#section" id="ref-for-section-1">sections</a>. The element for which an <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-7">outline</a> is created is said to be <dfn data-dfn-type="dfn" data-noexport="" id="the-outlines-owner">the outline’s owner<a class="self-link" href="sections.html#the-outlines-owner"></a></dfn>.</p>
     <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="section">section</dfn> is a container that corresponds to some nodes in the original DOM tree. Each
  section can have one heading associated with it, and can contain any number of further nested
  sections. <span class="impl">The algorithm for the outline also associates each node in the DOM
  tree with a particular section and potentially a heading.</span> (The sections in the outline
  aren’t <a data-link-type="element" href="sections.html#elementdef-section" id="ref-for-elementdef-section-15">section</a> elements, though some may correspond to such elements — they are
  merely conceptual sections.)</p>
     <div class="example" id="example-a68d1d91">
      <a class="self-link" href="sections.html#example-a68d1d91"></a> The following markup fragment: 
<pre class="highlight"><span class="nt">&lt;body&gt;</span>
  <span class="nt">&lt;h1&gt;</span>A<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;p&gt;</span>B<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;h2&gt;</span>C<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;p&gt;</span>D<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;h2&gt;</span>E<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;p&gt;</span>F<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</pre>
      <p>...results in the following outline being created for the <code>body</code> node (and thus the
    entire document):</p>
      <ol>
       <li data-md="">
        <p>Section created for <code>body</code> node. Associated with heading "A". Also associated with
paragraph "B". Nested sections:</p>
        <ol>
         <li data-md="">
          <p>Section implied for first <code>h2</code> element. Associated with heading "C". Also
associated with paragraph "D". No nested sections.</p>
         </li><li data-md="">
          <p>Section implied for second <code>h2</code> element. Associated with heading "E". Also
associated with paragraph "F". No nested sections.</p>
        </li></ol>
      </li></ol>
     </div>
     <div class="impl">
       The algorithm that must be followed during a walk of a DOM subtree rooted at a <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-29">sectioning content</a> element or a <a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-12">sectioning root</a> element to determine that
    element’s <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-8">outline</a> is as follows: 
      <ol>
       <li data-md="">
        <p>Let <var>current outline target</var> be null. (It holds the element whose <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-9">outline</a> is
being created.)</p>
       </li><li data-md="">
        <p>Let <var>current section</var> be null. (It holds a pointer to a <a data-link-type="dfn" href="sections.html#section" id="ref-for-section-2">section</a>, so that
elements in the DOM can all be associated with a section.)</p>
       </li><li data-md="">
        <p>Create a stack to hold elements, which is used to handle nesting. Initialize this stack to
empty.</p>
       </li><li data-md="">
        <p>Walk over the DOM in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-25">tree order</a>, starting with the <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-30">sectioning content</a> element
or <a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-13">sectioning root</a> element at the root of the subtree for which an outline is to be
created, and trigger the first relevant step below for each element as the walk enters and
exits it.</p>
        <dl class="switch">
         <dt>When exiting an element, if that element is the element at the top of the stack
         </dt><dd>
          <p class="note" role="note"> The element being exited is a <a data-link-type="dfn" href="dom.html#heading-content" id="ref-for-heading-content-5">heading content</a> element or an element with a <code>hidden</code> attribute. </p>
          <p>Pop that element from the stack.</p>
         </dd><dt> If the top of the stack is a <a data-link-type="dfn" href="dom.html#heading-content" id="ref-for-heading-content-6">heading content</a> element or an element with a <code>hidden</code> attribute 
         </dt><dd>Do nothing.
         </dd><dt>When entering an element with a <code>hidden</code> attribute
         </dt><dd> Push the element being entered onto the stack. (This causes the algorithm to skip that
    element and any descendants of the element.) 
         </dd><dt>When entering a <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-31">sectioning content</a> element
         </dt><dd>
           Run these steps: 
          <ol>
           <li data-md="">
            <p>If <var>current outline target</var> is not null, run these substeps:</p>
            <ol>
             <li data-md="">
              <p>If the <var>current section</var> has no heading, create an implied heading and
let that be the heading for the <var>current section</var>.</p>
             </li><li data-md="">
              <p>Push <var>current outline target</var> onto the stack.</p>
            </li></ol>
           </li><li data-md="">
            <p>Let <var>current outline target</var> be the element that is being entered.</p>
           </li><li data-md="">
            <p>Let <var>current section</var> be a newly created <a data-link-type="dfn" href="sections.html#section" id="ref-for-section-3">section</a> for the <var>current outline target</var> element.</p>
           </li><li data-md="">
            <p>Associate <var>current outline target</var> with <var>current section</var>.</p>
           </li><li data-md="">
            <p>Let there be a new <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-10">outline</a> for the new <var>current outline target</var>,
initialized with just the new <var>current section</var> as the only <a data-link-type="dfn" href="sections.html#section" id="ref-for-section-4">section</a> in the outline.</p>
          </li></ol>
         </dd><dt>When exiting a <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-32">sectioning content</a> element, if the stack is not empty
         </dt><dd>
           Run these steps: 
          <ol>
           <li data-md="">
            <p>If the <var>current section</var> has no heading, create an implied heading and let
that be the heading for the <var>current section</var>.</p>
           </li><li data-md="">
            <p>Pop the top element from the stack, and let the <var>current outline target</var> be
that element.</p>
           </li><li data-md="">
            <p>Let <var>current section</var> be the last section in the <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-11">outline</a> of the <var>current outline target</var> element.</p>
           </li><li data-md="">
            <p>Append the <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-12">outline</a> of the <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-33">sectioning content</a> element being exited to
the <var>current section</var>. (This does not change which section is the last
section in the <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-13">outline</a>.)</p>
          </li></ol>
         </dd><dt>When entering a <a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-14">sectioning root</a> element
         </dt><dd>
           Run these steps: 
          <ol>
           <li data-md="">
            <p>If <var>current outline target</var> is not null, push <var>current outline target</var> onto the stack.</p>
           </li><li data-md="">
            <p>Let <var>current outline target</var> be the element that is being entered.</p>
           </li><li data-md="">
            <p>Let <var>current outline target</var>’s <i>parent section</i> be <var>current section</var>.</p>
           </li><li data-md="">
            <p>Let <var>current section</var> be a newly created <a data-link-type="dfn" href="sections.html#section" id="ref-for-section-5">section</a> for the <var>current outline target</var> element.</p>
           </li><li data-md="">
            <p>Let there be a new <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-14">outline</a> for the new <var>current outline target</var>,
initialized with just the new <var>current section</var> as the only <a data-link-type="dfn" href="sections.html#section" id="ref-for-section-6">section</a> in the outline.</p>
          </li></ol>
         </dd><dt>When exiting a <a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-15">sectioning root</a> element, if the stack is not empty
         </dt><dd>
           Run these steps: 
          <ol>
           <li data-md="">
            <p>If the <var>current section</var> has no heading, create an implied heading and let
that be the heading for the <var>current section</var>.</p>
           </li><li data-md="">
            <p>Let <var>current section</var> be <var>current outline target</var>’s <i>parent section</i>.</p>
           </li><li data-md="">
            <p>Pop the top element from the stack, and let the <var>current outline target</var> be
that element.</p>
          </li></ol>
         </dd><dt> When exiting a <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-34">sectioning content</a> element or a <a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-16">sectioning root</a> element
    (when the stack is empty) 
         </dt><dd>
          <p class="note" role="note"> The <var>current outline target</var> is the element being exited, and it is the <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-35">sectioning content</a> element or a <a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-17">sectioning root</a> element at the root of
      the subtree for which an outline is being generated. </p>
          <p>If the <var>current section</var> has no heading, create an implied heading and
    let that be the heading for the <var>current section</var>.</p>
          <p>Skip to the next step in the overall set of steps. (The walk is over.)</p>
         </dd><dt>When entering a <a data-link-type="dfn" href="dom.html#heading-content" id="ref-for-heading-content-7">heading content</a> element
         </dt><dd>
           If the <var>current section</var> has no heading, let the element being entered be the
    heading for the <var>current section</var>. 
          <p>Otherwise, if the element being entered has a <a data-link-type="dfn" href="sections.html#rank" id="ref-for-rank-7">rank</a> equal to or higher than the
    heading of the last section of the <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-15">outline</a> of the <var>current outline target</var>, or if the heading of the last section of the <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-16">outline</a> of the <var>current outline target</var> is an implied heading, then
    create a new <a data-link-type="dfn" href="sections.html#section" id="ref-for-section-7">section</a> and append it to the <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-17">outline</a> of the <var>current outline target</var> element, so that this new section is the new last
    section of that outline. Let <var>current section</var> be that new section. Let the
    element being entered be the new heading for the <var>current section</var>.</p>
          <p>Otherwise, run these substeps:</p>
          <ol>
           <li data-md="">
            <p>Let <var>candidate section</var> be <var>current section</var>.</p>
           </li><li data-md="">
            <p><i>Heading loop</i>: If the element being entered has a <a data-link-type="dfn" href="sections.html#rank" id="ref-for-rank-8">rank</a> lower than the <a data-link-type="dfn" href="sections.html#rank" id="ref-for-rank-9">rank</a> of the heading of the <var>candidate section</var>, then create a new <a data-link-type="dfn" href="sections.html#section" id="ref-for-section-8">section</a>, and append it to <var>candidate section</var>. (This does not change
which section is the last section in the outline.) Let <var>current section</var> be
this new section. Let the element being entered be the new heading for the <var>current section</var>. Abort these substeps.</p>
           </li><li data-md="">
            <p>Let <var>new candidate section</var> be the <a data-link-type="dfn" href="sections.html#section" id="ref-for-section-9">section</a> that contains <var>candidate section</var> in the <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-18">outline</a> of <var>current outline target</var>.</p>
           </li><li data-md="">
            <p>Let <var>candidate section</var> be <var>new candidate section</var>.</p>
           </li><li data-md="">
            <p>Return to the step labeled <i>heading loop</i>.</p>
          </li></ol>
          <p>Push the element being entered onto the stack. (This causes the algorithm to skip any
    descendants of the element.)</p>
          <p class="note" role="note"> Recall that <code>h1</code> has the <em>highest</em> rank, and <code>h6</code> has the
      lowest rank. </p>
         </dd><dt>Otherwise
         </dt><dd>Do nothing.
        </dd></dl>
        <p>In addition, whenever the walk exits a node, after doing the steps above, if the node is not
associated with a <a data-link-type="dfn" href="sections.html#section" id="ref-for-section-10">section</a> yet, <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="associate section" data-noexport="" id="associate-section">associate the node with the <a data-link-type="dfn" href="sections.html#section" id="ref-for-section-11">section</a></dfn> <var>current section</var>.</p>
       </li><li data-md="">
        <p>Associate all non-element nodes that are in the subtree for which an outline is being created
with the <a data-link-type="dfn" href="sections.html#section" id="ref-for-section-12">section</a> with which their parent element is associated.</p>
       </li><li data-md="">
        <p>Associate all nodes in the subtree with the heading of the <a data-link-type="dfn" href="sections.html#section" id="ref-for-section-13">section</a> with which they are
associated, if any.</p>
      </li></ol>
      <p>The tree of sections created by the algorithm above, or a proper subset thereof, must be used
    when generating document outlines, for example when generating tables of contents.</p>
      <p>The outline created for <a href="sections.html#the-body-element">the <code>body</code> element</a> of a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> is the <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-19">outline</a> of the entire document.</p>
      <p>When creating an interactive table of contents, entries should jump the user to the relevant <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-36">sectioning content</a> element, if the <a data-link-type="dfn" href="sections.html#section" id="ref-for-section-14">section</a> was created for a real element in the
    original document, or to the relevant <a data-link-type="dfn" href="dom.html#heading-content" id="ref-for-heading-content-8">heading content</a> element, if the <a data-link-type="dfn" href="sections.html#section" id="ref-for-section-15">section</a> in
    the tree was generated for a heading in the above process.</p>
      <p class="note" role="note"> Selecting the first <a data-link-type="dfn" href="sections.html#section" id="ref-for-section-16">section</a> of the document therefore always takes the user to the top
      of the document, regardless of where the first heading in the <code>body</code> is to be
      found. </p>
      <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="outline-depth">outline depth</dfn> of a <a data-link-type="dfn" href="dom.html#heading-content" id="ref-for-heading-content-9">heading content</a> element associated with a <a data-link-type="dfn" href="sections.html#section" id="ref-for-section-17">section</a> <var>section</var> is the number of <a data-link-type="dfn" href="sections.html#section" id="ref-for-section-18">sections</a> that are ancestors of <var>section</var> in the outermost <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-20">outline</a> that <var>section</var> finds itself in when
    the <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-21">outlines</a> of its <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>'s elements are created, plus 1. The <a data-link-type="dfn" href="sections.html#outline-depth" id="ref-for-outline-depth-1">outline depth</a> of a <a data-link-type="dfn" href="dom.html#heading-content" id="ref-for-heading-content-10">heading content</a> element not associated with a <a data-link-type="dfn" href="sections.html#section" id="ref-for-section-19">section</a> is 1.</p>
      <p>User agents should provide default headings for sections that do not have explicit section
    headings.</p>
      <div class="example" id="example-10b09786">
       <a class="self-link" href="sections.html#example-10b09786"></a> Consider the following snippet: 
<pre class="highlight"><span class="nt">&lt;body&gt;</span>
  <span class="nt">&lt;nav&gt;</span>
    <span class="nt">&lt;p&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/p&gt;</span>
  <span class="nt">&lt;/nav&gt;</span>
  <span class="nt">&lt;p&gt;</span>Hello world.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;aside&gt;</span>
    <span class="nt">&lt;p&gt;</span>My cat is cute.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/aside&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</pre>
       <p>Although it contains no headings, this snippet has three sections: a document (the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-49">body</a></code>) with two subsections (a <code><a data-link-type="element" href="sections.html#elementdef-nav" id="ref-for-elementdef-nav-15">nav</a></code> and an <code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-11">aside</a></code>). A user
      agent could present the outline as follows:</p>
       <ol>
        <li data-md="">
         <p>Untitled document</p>
         <ol>
          <li data-md="">
           <p>Navigation</p>
          </li><li data-md="">
           <p>Sidebar</p>
         </li></ol>
       </li></ol>
       <p>These default headings ("Untitled document", "Navigation", "Sidebar") are not specified by
      this specification, and might vary with the user’s language, the page’s language, the user’s
      preferences, the user agent implementor’s preferences, etc.</p>
      </div>
      <div class="note" role="note">
        The following JavaScript function shows how the tree walk could be implemented. The <var>root</var> argument is the root of the tree to walk (either a <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-37">sectioning content</a> element or a <a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-18">sectioning root</a> element), and the <var>enter</var> and <var>exit</var> arguments are callbacks that are called with the nodes as they are entered and exited. <a data-link-type="biblio" href="references.html#biblio-ecma-262">[ECMA-262]</a> 
<pre class="highlight"><span class="kd">function</span> <span class="p">(</span><span class="nx">root</span><span class="p">,</span> <span class="nx">enter</span><span class="p">,</span> <span class="nx">exit</span><span class="p">)</span> <span class="p">{</span>
  <span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="nx">root</span><span class="p">;</span>
  <span class="nx">start</span><span class="o">:</span> <span class="k">while</span> <span class="p">(</span><span class="nx">node</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">enter</span><span class="p">(</span><span class="nx">node</span><span class="p">);</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">node</span><span class="p">.</span><span class="nx">firstChild</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">node</span> <span class="o">=</span> <span class="nx">node</span><span class="p">.</span><span class="nx">firstChild</span><span class="p">;</span>
      <span class="k">continue</span> <span class="nx">start</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">while</span> <span class="p">(</span><span class="nx">node</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">exit</span><span class="p">(</span><span class="nx">node</span><span class="p">);</span>
      <span class="k">if</span> <span class="p">(</span><span class="nx">node</span> <span class="o">==</span> <span class="nx">root</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">node</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
      <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">node</span><span class="p">.</span><span class="nx">nextSibling</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">node</span> <span class="o">=</span> <span class="nx">node</span><span class="p">.</span><span class="nx">nextSibling</span><span class="p">;</span>
        <span class="k">continue</span> <span class="nx">start</span><span class="p">;</span>
      <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
        <span class="nx">node</span> <span class="o">=</span> <span class="nx">node</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">;</span>
      <span class="p">}</span>
    <span class="p">}</span>
  <span class="p">}</span>
<span class="p">}</span>
</pre>
      </div>
     </div>
     <h4 class="heading settled" data-level="4.3.11" id="sections-usage-summary"><span class="secno">4.3.11. </span><span class="content">Usage summary</span><a class="self-link" href="sections.html#sections-usage-summary"></a></h4>
     <p><em>This section is non-normative.</em></p>
     <table class="vertical-summary-table">
      <thead>
       <tr>
        <th rowspan="2">Element
        </th><th>Purpose
       </th></tr><tr>
        <th>Example
      </th></tr></thead><tbody>
       <tr>
        <td rowspan="2"><code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-50">body</a></code>
        </td><td>
       </td></tr><tr>
        <td>
<pre class="highlight"><span class="cp">&lt;!DOCTYPE HTML&gt;</span>
<span class="nt">&lt;html&gt;</span>
  <span class="nt">&lt;head&gt;</span> <span class="nt">&lt;title&gt;</span>Steve Hill’s Home Page<span class="nt">&lt;/title&gt;</span> <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;</span> <span class="nt">&lt;p&gt;</span>Hard Trance is My Life.<span class="nt">&lt;/p&gt;</span> <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</pre>
       </td></tr><tr>
        <td rowspan="2"><code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-26">article</a></code>
        </td><td>
       </td></tr><tr>
        <td>
<pre class="highlight"><span class="nt">&lt;article&gt;</span>
  <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"/tumblr_masqy2s5yn1rzfqbpo1_500.jpg"</span> <span class="na">alt=</span><span class="s">"Yellow smiley face with the caption 'masif'"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;p&gt;</span>My fave Masif tee so far!<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;footer&gt;</span>Posted 2 days ago<span class="nt">&lt;/footer&gt;</span>
<span class="nt">&lt;/article&gt;</span>
<span class="nt">&lt;article&gt;</span>
  <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"/tumblr_m9tf6wSr6W1rzfqbpo1_500.jpg"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">&gt;</span>
  <span class="nt">&lt;p&gt;</span>Happy 2nd birthday Masif Saturdays!!!<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;footer&gt;</span>Posted 3 weeks ago<span class="nt">&lt;/footer&gt;</span>
<span class="nt">&lt;/article&gt;</span>
</pre>
       </td></tr><tr>
        <td rowspan="2"><code><a data-link-type="element" href="sections.html#elementdef-section" id="ref-for-elementdef-section-16">section</a></code>
        </td><td>
       </td></tr><tr>
        <td>
<pre class="highlight"><span class="nt">&lt;h1&gt;</span>Biography<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;section&gt;</span>
  <span class="nt">&lt;h1&gt;</span>The facts<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;p&gt;</span>1500+ shows, 14+ countries<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/section&gt;</span>
<span class="nt">&lt;section&gt;</span>
  <span class="nt">&lt;h1&gt;</span>2010/2011 figures per year<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;p&gt;</span>100+ shows, 8+ countries<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</pre>
       </td></tr><tr>
        <td rowspan="2"><code><a data-link-type="element" href="sections.html#elementdef-nav" id="ref-for-elementdef-nav-16">nav</a></code>
        </td><td>
       </td></tr><tr>
        <td>
<pre class="highlight"><span class="nt">&lt;nav&gt;</span>
  <span class="nt">&lt;ul&gt;</span>
    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/biog.html"</span><span class="nt">&gt;</span>Bio<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/discog.html"</span><span class="nt">&gt;</span>Discog<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
</pre>
       </td></tr><tr>
        <td rowspan="2"><code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-12">aside</a></code>
        </td><td>
       </td></tr><tr>
        <td>
<pre class="highlight"><span class="nt">&lt;h1&gt;</span>Music<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;p&gt;</span>As any burner can tell you, the event has a lot of trance.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;aside&gt;</span>You can buy the music we played at our <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"buy.html"</span><span class="nt">&gt;</span>playlist page<span class="nt">&lt;/a&gt;</span>.<span class="nt">&lt;/aside&gt;</span>
<span class="nt">&lt;p&gt;</span>This year we played a kind of trance that originated in Belgium, Germany, and the Netherlands in the mid 90s.<span class="nt">&lt;/p&gt;</span>
</pre>
       </td></tr><tr>
        <td rowspan="2"><code><a data-link-type="element" href="sections.html#elementdef-h1" id="ref-for-elementdef-h1-9">h1</a></code>–<code>h6</code>
        </td><td>A section heading
       </td></tr><tr>
        <td>
<pre class="highlight"><span class="nt">&lt;h1&gt;</span>The Guide To Music On The Playa<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;h2&gt;</span>The Main Stage<span class="nt">&lt;/h2&gt;</span>
<span class="nt">&lt;p&gt;</span>If you want to play on a stage, you should bring one.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;h2&gt;</span>Amplified Music<span class="nt">&lt;/h2&gt;</span>
<span class="nt">&lt;p&gt;</span>Amplifiers up to 300W or 90dB are welcome.<span class="nt">&lt;/p&gt;</span>
</pre>
       </td></tr><tr>
        <td rowspan="2"><code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-20">header</a></code>
        </td><td>
       </td></tr><tr>
        <td>
<pre class="highlight"><span class="nt">&lt;article&gt;</span>
  <span class="nt">&lt;header&gt;</span>
  <span class="nt">&lt;h1&gt;</span>Hard Trance is My Life<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;p&gt;</span>By DJ Steve Hill and Technikal<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/header&gt;</span>
  <span class="nt">&lt;p&gt;</span>The album with the amusing punctuation has red artwork.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/article&gt;</span>
</pre>
       </td></tr><tr>
        <td rowspan="2"><code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-19">footer</a></code>
        </td><td>
       </td></tr><tr>
        <td>
<pre class="highlight"><span class="nt">&lt;article&gt;</span>
  <span class="nt">&lt;h1&gt;</span>Hard Trance is My Life<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;p&gt;</span>The album with the amusing punctuation has red artwork.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;footer&gt;</span>
  <span class="nt">&lt;p&gt;</span>Artists: DJ Steve Hill and Technikal<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/footer&gt;</span>
<span class="nt">&lt;/article&gt;</span>
</pre>
       </td></tr><tr>
        <td rowspan="2"><code><a data-link-type="element" href="sections.html#elementdef-address" id="ref-for-elementdef-address-12">address</a></code>
        </td><td>
       </td></tr><tr>
        <td>
<pre class="highlight"><span class="nt">&lt;address&gt;</span>
To book DJ Steve Hill and Technikal, contact our
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"mailto:management@example.com"</span><span class="nt">&gt;</span>management<span class="nt">&lt;/a&gt;</span>.
<span class="nt">&lt;/address&gt;</span>
</pre>
     </td></tr></tbody></table>
     <h5 class="heading settled" data-level="4.3.11.1" id="article-or-section"><span class="secno">4.3.11.1. </span><span class="content">Article or section?</span><a class="self-link" href="sections.html#article-or-section"></a></h5>
     <p><em>This section is non-normative.</em></p>
     <p>A <code><a data-link-type="element" href="sections.html#elementdef-section" id="ref-for-elementdef-section-17">section</a></code> forms part of something else. An <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-27">article</a></code> is its own thing. But
  how does one know which is which? Mostly the real answer is "it depends on author intent".</p>
     <p>For example, one could imagine a book with a "Granny Smith" chapter that just said "These juicy,
  green apples make a great filling for apple pies."; that would be a <code><a data-link-type="element" href="sections.html#elementdef-section" id="ref-for-elementdef-section-18">section</a></code> because
  there’d be lots of other chapters on (maybe) other kinds of apples.</p>
     <p>On the other hand, one could imagine a tweet or tumblr post or newspaper
  classified ad that just said "Granny Smith. These juicy, green apples make a great filling for
  apple pies."; it would then be <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-28">article</a></code>s because that was the whole thing.</p>
     <p>Comments on an article are not part of the <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-29">article</a></code> on which they are commenting, but are
  related, therefore may be contained in their own nested <code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-30">article</a></code>.</p>
    </section></main>
  
<script src="js/fixup.js"></script>
  

<p class="prev_next">← <a href="document-metadata.html#document-metadata"><span class="secno">4.2</span> <span class="content">Document metadata</span></a> — <a href="index.html#contents">Table of contents</a> — <a href="grouping-content.html#grouping-content"><span class="secno">4.4</span> <span class="content">Grouping content</span></a> →</p></body></html>
